Quest 2 • Lesson 2
📱 Responsive Design (Media Queries)
Make your websites look great on every device – from mobile phones to desktop screens.
Responsive design ensures your website adapts to any screen size. The key tool is CSS media queries – they let you apply different styles based on device characteristics like width, height, or orientation.
"Mobile-first design means starting with the smallest screen and adding styles as the screen grows – it's easier and more performant."
🚀 Live Demo: See It in Action
Resize your browser window or drag the slider below to see how the grid adapts.
📐 Current screen width: Loading...
📱 Mobile
1 column on small screens
💻 Tablet
2 columns on medium screens
🖥️ Desktop
3 columns on large screens
320px (Mobile)
768px (Tablet)
1200px (Desktop)
📘 The media queries used
/* Default: 3 columns (desktop) */
.grid { grid-template-columns: repeat(3, 1fr); }
/* Tablet: 2 columns */
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: 1 column */
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; }
}
🧠 Key Concepts
- Viewport meta tag –
<meta name="viewport" content="width=device-width, initial-scale=1.0">– ensures proper scaling on mobile. - Media query syntax –
@media (max-width: 768px) { ... } - Breakpoints – common screen sizes where layouts change (e.g., 480px, 768px, 1024px).
- Mobile-first – design for the smallest screen first, then add styles for larger screens using
min-width. - Desktop-first – design for large screens first, then use
max-widthto scale down.
📊 Common Breakpoints
Mobile
≤ 480px
Phones in portrait
Tablet
481px – 768px
Tablets, large phones
Laptop
769px – 1024px
Small screens, laptops
Desktop
1025px – 1200px
Standard desktops
Wide
1201px+
Large monitors
responsive.css
/* Mobile-first (default) */
.container { padding: 1rem; }
.grid { grid-template-columns: 1fr; gap: 1rem; }
/* Tablet: 2 columns */
@media (min-width: 600px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: 3 columns */
@media (min-width: 900px) {
.grid { grid-template-columns: repeat(3, 1fr); }
.container { padding: 2rem; }
}
/* Large desktop: 4 columns */
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
.container { padding: 1rem; }
.grid { grid-template-columns: 1fr; gap: 1rem; }
/* Tablet: 2 columns */
@media (min-width: 600px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: 3 columns */
@media (min-width: 900px) {
.grid { grid-template-columns: repeat(3, 1fr); }
.container { padding: 2rem; }
}
/* Large desktop: 4 columns */
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
✨ Challenge: Make a Navbar Responsive
Write media queries to create a navbar that:
- Shows all links horizontally on desktop.
- Shows a hamburger menu (or stacked links) on mobile.
- Uses a breakpoint of 768px.
.nav-links { display: flex; gap: 2rem; }
.hamburger { display: none; }
@media (max-width: 768px) {
.nav-links { display: none; }
.hamburger { display: block; }
}
.hamburger { display: none; }
@media (max-width: 768px) {
.nav-links { display: none; }
.hamburger { display: block; }
}
➡️ Next Lesson
Lesson 2.3: CSS Grid Deep Dive – master complex layouts.
Continue to Lesson 2.3 →(Coming soon – check back or buy Pro Pack for early access)
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee