Responsive design
People open pages on phones, tablets and laptops. A responsive page changes its layout to fit each one.
A media query applies CSS only when a condition is true. @media (max-width: 600px) { … } means "only on screens 600 pixels wide or narrower".
A common pattern: cards sit side by side on wide screens, then stack in one column on phones with flex-direction: column. The checks open your page at phone width and at laptop width to test both.
Example
<style>
.row { display: flex; gap: 8px; }
.row div { flex: 1; background: #bbf7d0; padding: 12px; }
@media (max-width: 600px) {
.row { flex-direction: column; }
}
</style>
<div class="row"><div>A</div><div>B</div><div>C</div></div>Rules inside a media query sit inside its own braces, so you'll see two closing braces at the end.
Your tasks
1 of 3 done- Add a media query for screens up to 600px wide
- On a phone (360px wide), stack the cards in a column
- On a laptop, keep the cards side by side
Tutor
The tutor guides you toward the answer instead of handing it over. It uses your own Claude usage.
Quick check
When does @media (max-width: 600px) apply its CSS?
No problems found. Unclosed tags, missing semicolons and errors show up here in plain words.