Layout and responsiveness · Lesson 11 of 17
Responsive design
One page that looks right on phones and computers.
8 minutes2 games
A media query applies CSS only above or below a screen size. The common approach is “mobile first”: style for phones first, then add rules for bigger screens with @media (min-width: 700px) { ... }.
HTML
<style>
.cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
.cards div { background: #fef3c7; padding: 16px; border-radius: 8px; }
@media (min-width: 500px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
</style>
<div class="cards">
<div>One</div><div>Two</div><div>Three</div>
</div>The preview is wide, so you'll see 3 across. On a phone they stack.
Quick question
When does @media (min-width: 900px) apply?
Order the lines
Put the media query in order.
- Click the lines in the right order
Learn more from
Played 0 of 2 games
Sign in to save your progress and earn XP.