Responsive design & media queries

Make room for every screen

Lesson 9 of 20 · 10 min · Module 3: Layouts that adapt

A layout should adapt to the space available. Start with a narrow layout, then add columns when the viewport is wide enough.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Start with a mobile-first base layout
Override one property at a breakpoint
Check both sides of a breakpoint

The idea

A media query applies rules only when its condition matches. @media (min-width: 600px) activates at 600px and wider.

.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

01Make the default useful

One column is a sensible narrow-screen default. A wider viewport can fit two cards without squeezing their content. The media query changes the layout, not the underlying HTML.

02Test the boundary

A min-width condition includes the stated width. Test 599px and 600px to verify exactly where the change occurs. A screenshot at just one wide width is not enough.

Your turn

Make .cards a grid with one column below 600px and two equal columns from 600px upward. Use a 16px gap and keep both cards. Checks use different viewport widths.

What the checks look for

One column at 375px
One column just below the breakpoint
Two columns at the breakpoint
Two columns on a wider screen
Spacing remains 16px
Both cards remain present

Try it in the editor →

Take this with you

Responsive design responds to available space, not to a fixed list of device names.