Day 8: Fluidity

Your website will be viewed on a 4k monitor and a tiny iPhone SE. It needs to work on both.

The Viewport Meta Tag

(We learned this in HTML, but check it!) <meta name="viewport" content="width=device-width, initial-scale=1"> Without this, phones will zoom out like it’s a desktop site.

Media Queries (@media)

Conditional CSS. “If the screen is smaller than X, apply these rules.”

/* Default styles (Desktop first approach) */
.container {
    display: flex; /* Row by default */
}

/* Tablet */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Switch to stack */
    }
}

/* Mobile */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem; /* Smaller text */
    }
}

Mobile-First Workflow (Better)

Start by coding for the Phone, then add complexity for larger screens. Use min-width.

/* Base Mobile Styles */
.container {
    flex-direction: column;
}

/* Desktop override */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

Responsive Images

Ensure images never overflow their container.

img {
    max-width: 100%;
    height: auto;
}

Homework for Day 8:

1. Take your Grid layout from Day 7.
2. Add a Media Query for mobile (max-width: 600px).
3. Change the grid to be a single column stack:

   grid-template-areas:
       "header"
       "main"
       "sidebar"
       "footer";

4. Resize your browser to test it.

Day 9: Adding life with Animations!