css · level 2 · unit 4 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A adds rules only when the screen is wide enough.
A page looks right on any screen. The main tool is a media query: @media (min-width: 700px) { … }. The rules inside its curly brackets only count when the screen is at least 700px wide.
Write the phone layout first, outside any query. Then add queries that change only what wider screens need. This way of working is called mobile first.
The width where the layout switches is a . Put breakpoints where your design starts to look stretched, not at the size of one particular phone.
<div class="cards">
<div class="card">Maths</div>
<div class="card">Art</div>
<div class="card">Music</div>
<div class="card">Science</div>
</div>.cards {
display: grid;
gap: 16px;
}
@media (min-width: 700px) {
.cards {
grid-template-columns: 1fr 1fr;
}
}
.card {
padding: 16px;
background-color: lightcyan;
}Press show my page to see it here.
On a phone the cards stack in one column. From 700px wide, they pair up in two.
guess first
On a phone 400px wide, what colour is the banner?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="banner">Free delivery this week</div>.banner {
padding: 16px;
background-color: gold;
}
@media (min-width: 900px) {
.banner {
background-color: skyblue;
}
}your turn
Your turn. Three columns on big screens.
Fill in the media query so the grid gets three equal columns from 900px wide. Phones keep one column.
the page you’re styling
<div class="grid">
<div>Pizza</div>
<div>Pasta</div>
<div>Salad</div>
<div>Soup</div>
<div>Curry</div>
<div>Tacos</div>
</div>your css
Press show my page to see it here.
- the list is a grid on every screennot checked yet
- three equal columns from 900px widenot checked yet
fix it
The wide layout never switches on. Fix it!
the page you’re styling
<div class="cards">
<div class="card">Monday</div>
<div class="card">Tuesday</div>
<div class="card">Wednesday</div>
</div>your css
Press show my page to see it here.
- the test sits in round bracketsnot checked yet
- wide screens still get two columnsnot checked yet
- The rules inside the query never count. Look closely at the test itself.
- The test in a media query must sit inside round brackets.
- Write
@media (min-width: 700px) {, then press run.
nailed it
your page changes with the screen. :D
- Rules inside
@media (min-width: 700px)only count on wide screens. - Write the phone layout first, then add wider layouts.
- The test always goes in round brackets.
new words in your collection
- responsive
- media query
- breakpoint
This lesson isn’t saved. A free account remembers every lesson you finish.