Responsive Design with Media Queries

Your CSS runs on phones, tablets, and wide monitors alike, and a layout tuned for one of those often looks broken on the others. Media queries let you write CSS that only applies under certain conditions, usually the width of the screen.

Mobile-first: start narrow, add complexity as space allows

A layout built "mobile-first" writes its base styles for a small screen first — a single column, generous tap targets, nothing side by side — and then layers on extra rules for wider screens using min-width media queries. The alternative, starting from a wide desktop layout and cramming it into a phone screen afterward, tends to fight you at every step, since you're constantly undoing desktop-only decisions rather than adding to a simple base.

It also matches how the CSS cascade already works in your favor: write the simple, stacked version first, then only add the rules that make it spread out once there's actually room for that.

The @media syntax

A media query wraps a normal block of CSS in a condition. This rule only takes effect once the browser window is at least 600px wide:

Try it yourself
Result
The result box above is exactly as wide as this page's content column, so it responds to the real width available to it — try resizing your actual browser window narrower and wider to watch the color flip at the 600px mark, rather than imagining what it would do.

A simple responsive layout

Here's the mobile-first pattern in practice: the cards start in a single stacked column — the safe, simple default — and a media query switches them to two side-by-side columns only once there's enough width to fit them comfortably:

Try it yourself
Result

Shrink your browser window below 600px wide and the two cards drop back into a single stacked column automatically — no JavaScript involved, just CSS reacting to the space it has.

Picking a breakpoint

It's tempting to look up a table of "standard" device widths and hardcode those as your breakpoints, but devices vary too much for that to hold up for long — the real rule is simpler: resize the browser yourself and add a breakpoint wherever the layout actually starts to look cramped or awkward, not at some specific pixel number chosen in advance. The content should decide where the breaks happen, not a guess about what phone someone owns.

Note: most designs only need two or three breakpoints total. Reaching for one every time something looks slightly off is usually a sign the underlying layout is too rigid — flexible units like % and fr, covered in earlier lessons, often remove the need for a breakpoint entirely.
PreviousTransitions & Animations