⚡ 0 XP
Step 1 of 2
Media queries
Most people in India open websites on a phone. Three columns that look great on a laptop are far too narrow on a phone.
A media query applies CSS only when the screen matches a condition:
@media (max-width: 600px) { … } — only on screens 600px wide or less- inside it, write normal rules that override the desktop ones
Tip: drag the preview narrower to watch your layout change.
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.gallery {
grid-template-columns: 1fr;
}
}
🎯 Challenge: One column on phones +25 XP
Keep the 3-column grid for big screens. Add a @media (max-width: 600px) rule that changes .gallery to one column (grid-template-columns: 1fr).
Try twice to unlock the solution (0/2)
style.cssCtrl ⏎
Console
Output from console.log appears here.
Checklist
Press Run to check your code.
- ○
There is a @media rule with max-width
- ○
It is a phone-sized width (320–900px)
- ○
Inside it, .gallery changes its columns
- ○
On big screens it is still a grid
Lesson notes (text version)
1. Media queries
Most people in India open websites on a phone. Three columns that look great on a laptop are far too narrow on a phone.
A media query applies CSS only when the screen matches a condition:
@media (max-width: 600px) { … } — only on screens 600px wide or less- inside it, write normal rules that override the desktop ones
Tip: drag the preview narrower to watch your layout change.
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
.gallery {
grid-template-columns: 1fr;
}
}
Challenge: One column on phones
Keep the 3-column grid for big screens. Add a @media (max-width: 600px) rule that changes .gallery to one column (grid-template-columns: 1fr).
2. Stacking a navbar on phones
A navbar with a logo and five links does not fit on a 360px phone. A common fix is to stack it:
- on big screens:
display: flex; (a row) - on phones:
flex-direction: column; inside a media query
Some developers work mobile-first: write the phone layout normally, then use @media (min-width: 700px) to add the desktop layout. Both ways are fine.
Always keep <meta name="viewport" content="width=device-width, initial-scale=1"> in a real page’s <head> — our preview adds it for you.
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
}
Challenge: A navbar that fits phones
Keep .navbar as a flex row on big screens. Add a media query for phones that sets flex-direction: column on .navbar.