Web Development / CSS
Lesson 14 of 30
Responsive design
Responsive sites work on every screen size. Add the viewport meta tag, use flexible layouts, and media queries for bigger changes.
Key points
- <meta name="viewport" content="width=device-width, initial-scale=1">
- Design mobile-first
- @media (max-width: 700px) { ... }
@media (max-width: 700px) {
.sidebar { display: none; }
}Quiz · +10 XP
What does a media query let you do?
Log in to save progress and earn XP.