A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>@media (min-width: 48rem) { .nav { display:flex; } }</style><main class="demo"><nav><a href="#">Home</a><a href="#">Docs</a></nav></main>
Engineering judgment: Use the smallest number of breakpoints that correspond to real layout transitions; let flex and grid handle the rest.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Media Queries and Breakpoints | A breakpoint is not a device name. It is a threshold where your layout’s constraints need to change. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
A good CSS change narrows the problem. Use the smallest number of breakpoints that correspond to real layout transitions; let flex and grid handle the rest. This keeps the rule understandable when content, theme, or viewport conditions change later.
The useful mental model here is practical: how media conditions let CSS adapt to viewport, user preference, and display capabilities. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
<style>@media (prefers-reduced-motion: reduce) { .motion { animation:none; } }</style><main class="motion">Example content</main>
A good CSS change narrows the problem. Use the smallest number of breakpoints that correspond to real layout transitions; let flex and grid handle the rest. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>@media (width >= 60rem) { .layout { grid-template-columns: 1fr 1fr; } }</style><main class="layout">Example content</main>
Range query is useful here because it demonstrates media queries and breakpoints under a concrete input rather than as an abstract property list.
<style>@media print { nav { display:none; } }</style><main class="demo"><nav><a href="#">Home</a><a href="#">Docs</a></nav></main>
Print query is useful here because it demonstrates media queries and breakpoints under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.