Responsive Design
Lesson 10 • Intermediate Track
What You'll Learn
💡 Think of It Like This
Imagine water in different containers: Water naturally fills whatever shape it's poured into — a glass, a bowl, a bottle. Responsive design works the same way: your content flows andadapts to whatever screen size it's viewed on, from a tiny phone to a giant desktop monitor.
Without responsive design, your website is like a rigid block of ice — it stays the same size no matter what container you put it in, and it overflows or looks broken on smaller screens.
1. Why Responsive Design Matters
Over 60% of all web traffic comes from mobile devices. If your website doesn't look good on a phone, most visitors will leave immediately. Google also uses mobile-first indexing, meaning it judges your site primarily by how it looks on mobile.
| Without Responsive Design | With Responsive Design |
|---|---|
| Text too small to read on mobile | Text scales to readable size |
| Horizontal scrolling required | Content fits the screen width |
| Buttons too small to tap | Touch-friendly button sizes |
| Poor Google ranking | Better SEO and ranking |
2. The Viewport Meta Tag (Required!)
Every responsive website must include this tag in the <head>. Without it, mobile browsers will render your page at desktop width (typically 980px) and then shrink it down, making everything tiny and unreadable.
<meta name="viewport" content="width=device-width, initial-scale=1.0">| Attribute | What It Does |
|---|---|
width=device-width | Sets viewport width to the device's actual screen width |
initial-scale=1.0 | Sets initial zoom level to 100% (no zoom in or out) |
⚠️ Common Mistake: Forgetting this meta tag is the #1 reason responsive CSS "doesn't work." Always add it first!
3. Media Queries — The Heart of Responsive Design
Media queries let you apply different CSS rules based on screen size. Think of them as "if statements" for CSS — "if the screen is smaller than 768px, do this."
@media (max-width: 768px) {
/* These styles only apply on screens ≤ 768px */
.sidebar { display: none; }
.content { width: 100%; }
}Media Queries in Action
Resize the preview to see styles change at different breakpoints
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
margin: 0;
}
.status {
padding: 20px;
border-radius: 12px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin: 20px;
transition: all 0.3s ease;
}
/* Desk
...4. Common Breakpoints
Breakpoints are the screen widths where your layout changes. Here are the most commonly used ones:
| Device | Width Range | Media Query |
|---|---|---|
| 📱 Mobile | 320px – 768px | @media (max-width: 768px) |
| 📱 Tablet | 769px – 1024px | @media (max-width: 1024px) |
| 💻 Laptop | 1025px – 1440px | @media (max-width: 1440px) |
| 🖥️ Desktop | 1441px+ | @media (min-width: 1441px) |
💡 Pro Tip: Don't overthink breakpoints. Most projects only need 2-3: one for mobile (~768px), one for tablet (~1024px), and desktop is the default.
5. Mobile-First vs Desktop-First
There are two approaches to writing responsive CSS. Mobile-first is recommended by most professionals.
| Approach | How It Works | Media Query |
|---|---|---|
| Mobile-First ✅ | Write mobile styles first, then add desktop overrides | @media (min-width: 768px) |
| Desktop-First | Write desktop styles first, then override for mobile | @media (max-width: 768px) |
Mobile-First Approach
Start with mobile styles, enhance for larger screens
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-First</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
margin: 0;
}
h1 { margin-bottom: 20px; }
/* MOBILE STYLES (default — no media query!) */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.card {
background: #1e2
...6. Responsive Units
Using the right CSS units is crucial for responsive design. Avoid fixed px values for things that should scale.
| Unit | Relative To | Best For | Example |
|---|---|---|---|
% | Parent element | Widths, containers | width: 80%; |
vw / vh | Viewport width/height | Full-screen sections | height: 100vh; |
rem | Root font size (16px) | Font sizes, spacing | font-size: 1.25rem; |
em | Parent font size | Padding relative to text | padding: 1.5em; |
Responsive Units Comparison
See how different units behave when resizing
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Units</title>
<style>
body {
background: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
margin: 0;
}
h1 { margin-bottom: 20px; }
h3 { color: #22c55e; margin: 20px 0 8px; }
.demo {
padding: 15px;
border-radius: 8px;
margin: 8px 0;
font-size: 14px;
font-weight: bold
...7. Responsive Images
Images are one of the biggest causes of broken responsive layouts. By default, images render at their natural size, which can overflow containers on smaller screens.
/* The essential responsive image rule */
img {
max-width: 100%;
height: auto;
}
/* This means: "Never be wider than your
container, and keep your aspect ratio." */💡 Pro Tip: Always add max-width: 100%; height: auto; to all images. Many CSS resets include this automatically.
8. Building a Complete Responsive Page
Let's put everything together — viewport meta tag, media queries, responsive units, and mobile-first design:
Complete Responsive Page
A full responsive layout with navbar, hero, cards, and footer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0f172a;
font-family: system-ui, sans-serif;
color: #e5e7eb;
}
/* NAVBAR */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #1e293b;
border-bottom:
...⚠️ Common Mistakes
- Forgetting the viewport meta tag — Without it, media queries won't work on mobile devices. Always add it to your HTML head.
- Using fixed pixel widths —
width: 800pxwill overflow on smaller screens. Usemax-width: 800pxwithwidth: 100%instead. - Too many breakpoints — Most sites need only 2-3 breakpoints. Adding more creates maintenance headaches.
- Not testing on real devices — Browser dev tools are helpful, but always test on a real phone and tablet when possible.
- Hiding content on mobile — Don't use
display: noneto hide important content on mobile. Reorganise it instead.
🎉 Lesson Complete
You now understand responsive design — the skill that makes your websites work on every device. Key takeaways:
- ✅ Always include the viewport meta tag
- ✅ Use media queries to adapt layouts at different screen widths
- ✅ Mobile-first is the professional approach (min-width queries)
- ✅ Use %, vw, rem instead of fixed px for responsive sizing
- ✅ Add
max-width: 100%; height: auto;to all images - ✅ Most sites only need 2-3 breakpoints
Sign up for free to track which lessons you've completed and get learning reminders.