Responsive Design & Mobile-First
Master responsive design — fluid typography, responsive images, mobile-first media queries, and testing across devices with AI-assisted debugging.
Premium Course Content
This lesson is part of a premium course. Upgrade to Pro to unlock all premium courses and content.
- Access all premium courses
- 1000+ AI skill templates included
- New content added weekly
🔄 Recall Bridge: In the previous lesson, you built UI components — cards, modals, and dropdowns with keyboard support and accessibility. Now let’s make everything work beautifully on every screen size.
Responsive design ensures your interface works from 320px phones to 4K monitors. With mobile traffic exceeding desktop globally, mobile-first isn’t optional — it’s the default starting point.
Mobile-First CSS
Write base styles for mobile, then add complexity for larger screens:
/* Base: mobile (no media query needed) */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* Tablet */
@media (min-width: 640px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Common breakpoints (min-width, mobile-first):
| Breakpoint | Target | Use |
|---|---|---|
| 640px | Large phones / small tablets | 2-column layouts |
| 768px | Tablets | Sidebar appears |
| 1024px | Small desktops | Full desktop layout |
| 1280px | Large desktops | Wider content area |
Fluid Typography with clamp()
Replace fixed font sizes with fluid scaling:
:root {
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
--text-2xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
AI prompt for fluid typography:
Generate a fluid typography scale using clamp(). Requirements: (1) Body text: min 16px on 320px screens, max 18px on 1400px screens, (2) Headings h1-h4: proportionally scaled, (3) Small text (captions): min 12px, max 14px. Use rem units. Provide the clamp() values and explain the calculation.
Responsive Images
The <picture> element with format and size optimization:
<picture>
<source
type="image/webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
/>
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
alt="Descriptive alt text"
width="1600" height="900"
loading="lazy"
/>
</picture>
Image optimization checklist:
| Technique | Impact | Implementation |
|---|---|---|
| WebP/AVIF format | 25-50% smaller than JPEG | <picture> with format fallback |
| srcset | Right size for each device | Multiple widths in srcset attribute |
| loading=“lazy” | Defer off-screen images | Add attribute to below-fold images |
| width + height | Prevent layout shift (CLS) | Always set explicit dimensions |
| sizes | Help browser choose right image | Describe image’s display width |
Responsive Patterns
| Pattern | Use Case | Implementation |
|---|---|---|
| Stack to row | Cards, features | Flexbox: flex-direction: column → row |
| Sidebar collapse | Dashboard, docs | Grid: remove column on mobile |
| Navigation → hamburger | Site nav | Hide links, show menu button on mobile |
| Table → card | Data tables | Reformat rows as cards on mobile |
| Full-bleed → contained | Hero sections | max-width with padding on small screens |
✅ Quick Check: You set
width: 100vwon a container to make it full-width. On mobile, there’s a horizontal scrollbar. Why? (Answer:100vwincludes the scrollbar width, while100%of the body does not. On pages with vertical scrollbars,100vwis wider than the visible area, causing horizontal overflow. Fix: usewidth: 100%instead of100vw, or addoverflow-x: hiddento the body. AI-generated CSS frequently uses100vw— always check for this issue.)
Testing Responsive Design
AI prompt for responsive debugging:
I’m testing my page at different screen sizes. At 768px width, the sidebar overlaps the main content and the navigation links wrap to two lines. Here’s my CSS: [PASTE]. Debug the responsive behavior and suggest fixes for both issues.
Testing checklist:
| Width | Device | Check |
|---|---|---|
| 320px | Small phone (iPhone SE) | Nothing overflows, text readable |
| 375px | Standard phone (iPhone) | Layout not cramped |
| 768px | Tablet | Sidebar behavior correct |
| 1024px | Small desktop | Full layout renders |
| 1920px | Standard desktop | Content not too wide |
Key Takeaways
- Mobile-first CSS (min-width media queries) produces cleaner, more performant code: mobile styles are the default with no media query, and you progressively add layout complexity for larger screens — mobile users on slow connections download the minimum CSS needed
- Fluid typography with
clamp()eliminates breakpoint-based font size media queries:clamp(min, preferred, max)creates smooth scaling between a minimum and maximum size that adapts to any viewport without jumps or manual breakpoints - Responsive images with
srcset,sizes, and WebP format can reduce image downloads by 90% on mobile: a phone downloads a 50KB WebP instead of a 2MB desktop JPEG — always set explicitwidthandheightattributes to prevent layout shift (CLS)
Up Next
In the next lesson, you’ll learn accessibility in depth — WCAG guidelines, ARIA roles, keyboard navigation, color contrast, and how to audit your pages for compliance.
Knowledge Check
Complete the quiz above first
Lesson completed!