Adapt the layout for a narrow screen

Turn two columns into one when space becomes narrow.

Official sourceW3C Media Queries — width featureReviewed: 2026-08-26

STEP 1 · LEARN

How it works

A media query applies rules only when its condition is true. The base rule keeps two columns, while max-width: 720px replaces them with one on screens up to 720px wide.

Correct example

.layout { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }

Desktop uses two columns, while a phone stacks them without changing the HTML.

Common mistake

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

min-width would apply one column from 720px upward, the opposite of the requirement.

STEP 2 · APPLY

Your exercise

Keep the two-column base grid and complete the media query with one column at a maximum width of 720px.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The base rule has two columns.
At a maximum width of 720px the grid has one column.
The target element is present in the page.

Explain the solution logic

The rule inside @media overrides only the column count when the width condition is met.

How it works

Your exercise

Write and see the result

What needs to pass