Grid CanyonISSUE #23 of 27

media queries · screen sizes

FlexboVSThe Float Phantom

Flexbo saysMedia queries apply CSS conditionally — most often by screen width breakpoints.

@media (max-width: 600px) { … } applies rules only when the condition holds. Width breakpoints are the backbone of responsive design. Favor a mobile-first approach: write base styles for small screens, then use min-width queries to layer on enhancements for larger ones.

Power-ups you unlock

@media (condition){ rules }
Width breakpoints drive responsive layouts
Mobile-first: base small, enhance with min-width
Queries can test height, orientation, and more

The Float Phantom attacks — common mistakes

Desktop-first with cascading max-width overrides
Too many arbitrary breakpoints
Pixel-perfect breakpoints instead of content-driven

Boss battleSingle-column by default, two-column above 700px with a min-width query.

Example code

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>.g{display:grid;gap:10px}@media(min-width:700px){.g{grid-template-columns:1fr 1fr}}.g div{background:#b388ff;color:#06040d;padding:18px}</style></head><body style="background:#06040d;padding:20px"><div class="g"><div>a</div><div>b</div></div><p style="color:#8a82b0">resize across 700px</p></body></html>

▶ Open the interactive comic issue

‹ Responsive · Viewport Units · Vw · Vh · Vmin · Vmax Media Queries · Prefers-Color-Scheme ›