A layout that changes at two breakpoints
The label is generated by CSS, so it always tells you which query is winning. Open the full-screen editor and resize the window to watch it change at 480px and 800px.
A media query wraps rules in a condition about the device, such as @media (min-width: 40rem) { ... }, so they apply only when it's true; you can test width ranges with min-/max- or the newer range syntax, test orientation, and combine tests with and, commas and not.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make .sidebar hidden on screens narrower than 48rem and shown as a 16rem-wide column on wider screens, mobile first, with range syntax.
Write one media query that applies when the screen is in landscape and at most 500px tall (a phone on its side), and reduce the header's padding there.
In JavaScript, log "wide" or "narrow" now, and again every time the viewport crosses 48rem.
Explain it without notes
What is a media query, and what happens to the rules inside it?
Explain min-width vs max-width and why mobile-first code mostly uses min-width.
What problem does the range syntax solve?
How do you combine media queries with "and", "or" and "not"?
Why can a rule inside a matching media query still lose?
Preview
Console
Nothing logged yet.