Understand the idea

A responsive page adapts without requiring a separate mobile website. Start with a usable single-column layout and add complexity when there is room.

A media query conditionally applies CSS. Choose a breakpoint where your content needs a different arrangement. Relative sizing, flexible images and sensible maximum text widths do much of the work before you need a query.

Read the example

This is a CSS fragment. Put it in a stylesheet and supply the matching HTML described in the exercise.

CSS · EXAMPLE
img { max-width: 100%; height: auto; }
.layout { display: grid; gap: 24px; }
@media (min-width: 60rem) {
  .layout { grid-template-columns: 16rem minmax(0, 1fr); }
}

A small mistake, explained

What goes wrong

Testing only at a few named phone widths can miss a failure between them. Fixed-width children can also defeat a flexible parent.

How to fix it. Drag the viewport continuously and increase text size. Inspect the first element that extends beyond the viewport.

Try it yourself

Use a navigation region and an article inside .layout. Check the page at 320px and at 200% text enlargement.

Further reading

W3C — Media Queries

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.