Lesson 9 of 18
Responsive Design 📱
What You'll Learn
- Use media queries to adapt layouts to different screen sizes
- Understand mobile-first design
- Make your web pages look good on phones and desktops
Why Responsive Design?
More than half of all web traffic comes from mobile phones. Your sites need to look great on a 375px phone screen AND a 1440px desktop monitor. Responsive design uses CSS to adapt layouts to any screen size.
Media Queries
CSS
/* Base styles (mobile first) */
.grid {
display: grid;
grid-template-columns: 1fr; /* one column on mobile */
gap: 1rem;
}
/* Tablet (768px and wider) */
@media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 1fr; /* two columns */
}
}
/* Desktop (1024px and wider) */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* three columns */
}
}Mobile First
Start with the mobile layout as your base CSS. Then use min-width media queries to add complexity as the screen gets bigger. This is the industry standard approach.
Flexible Units
CSS
/* Avoid fixed pixel widths for layout */
.container {
width: 90%; /* percent of parent */
max-width: 1200px; /* never wider than this */
margin: 0 auto; /* center it */
}
/* clamp(min, preferred, max) */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}Make Your Grid Responsive
Take your card grid from Lesson 8. Change the base to 1 column. Add a @media (min-width: 640px) breakpoint for 2 columns. Add a @media (min-width: 1024px) for 3 columns. Test by resizing your browser!
Quick Check
What is a media query?
What does mobile-first design mean?
What does max-width: 1200px on a container do?