Media queries

@media (min-width: 700px) { … } applies its rules from 700px wide upward. Written mobile-first, the base styles fit a phone and each query adds a wider layout.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

More than half of visits are on phones. A layout that starts small and grows is simple to reason about; one that starts wide and shrinks is a pile of undo rules.

How to think about it

Write the phone layout with no query at all. Then, at the width where there is room, add a min-width block that only changes what needs to change.

Worked example

<div class="cols"><div>One</div><div>Two</div></div>

Two boxes.

.cols { display: grid; gap: 10px; }

Phone first: a grid with one column, so the boxes stack.

@media (min-width: 700px) { .cols { grid-template-columns: 1fr 1fr; } }

From 700px wide, two columns side by side. Nothing to undo on a phone.

Your turn

Apply rules from 900px wide upward.

@media (: 900px) { .wide { display: flex; } }

The trap

Forgetting the viewport meta tag. Phones then pretend to be 980px wide, the min-width query fires, and the two-column layout appears at postage-stamp size.

Practise media queries on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.