Responsive design
Design mobile-first and add breakpoints only where the content demands it.
What you will be able to do
- Write mobile-first media queries
- Use fluid type and spacing
- Test at 320px and up
Responsive design is not about matching devices; it is about letting content adapt. Start with the smallest usable layout and enhance it as space appears.
/* mobile first */
.layout {
display: grid;
gap: 24px;
}
@media (min-width: 800px) {
.layout {
grid-template-columns: 260px minmax(0, 1fr);
}
}| Range | Typical change |
|---|---|
| 320–599px | Single column, stacked navigation |
| 600–899px | Two columns for cards, larger type |
| 900–1199px | Sidebar layout, denser grids |
| 1200px+ | Max-width container, wider media |
Your turn
EasyMake the layout adapt
Start with one column, then switch to two columns at 760px.
CSS · starter
.layout {
display: grid;
gap: 24px;
}Check your understanding before moving on.
Knowledge checkQuestion 1
What does min-width in a media query mean?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.