Mobile-First & Media Queries

Every rule you've written so far applies to one screen, whatever size it happens to be. Real visitors show up on phones, tablets, and monitors — and from here on, you design for the smallest one first.

Mobile-first: design for the phone, then add the rest

Imagine writing directions and assuming, by default, that whoever reads them is on foot — then adding "if you have a car, take the highway instead" as an amendment for the people who do. You wouldn't write car-directions first and then subtract the highway for everyone walking. Mobile-first styling works the same way: your plain, un-conditional rules are the small-screen version. Anything extra for more room gets layered on top, not the reverse.

Adding rules for wider screens: media queries

A media query is a block that only takes effect once the screen is at least a certain width. Rules inside it behave exactly like normal rules — they're just conditional:

.stack {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .stack {
    flex-direction: row;
  }
}

Read the base rule first: on any screen, .stack is a flexbox stacked in a column — the safe, narrow default. The @media (min-width: 600px) block only kicks in once the screen is at least 600px wide, and it overrides just the one property that needs to change: at that width, .stack switches to a row instead.

Common mistake

Writing rules the other way around — desktop-first, with max-width overrides subtracting things for smaller screens — tends to snowball as a page grows: every new breakpoint has to fight the desktop defaults on top of it. Starting from the smallest screen and adding min-width rules on top keeps each layer simple and additive instead.

You now know enough CSS to style a whole page, at every screen size. The project ahead does exactly that.

Exercise

Stack on phones, row out on wider screens

Make the two-line summary below mobile-first:

- .stack — display: flex; and flex-direction: column; (the small-screen default). - Add @media (min-width: 600px) { .stack { flex-direction: row; } } underneath, so wider screens lay the two lines out side by side instead.