Main Content
This is the main content area. The navigation slides in from the left when the menu button is clicked.
Try clicking the menu button to see the off-canvas navigation in action!
📱 Viewport and Meta Tags
Understanding the foundation of responsive design:
🎛️ Interactive Media Queries
Experiment with different breakpoints and see how they affect layout:
Edit CSS Media Queries:
📐 Common Responsive Patterns
Learn proven responsive design patterns and when to use them:
📱 Column Drop Pattern
Columns stack vertically as the viewport narrows. Most common and simple pattern.
Desktop
1
2
3
Tablet
1
2
3
Mobile
1
2
3
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.column {
flex: 1;
min-width: 300px;
}
@media (max-width: 768px) {
.column {
flex: 100%;
}
}
🌊 Mostly Fluid Pattern
Layout remains mostly the same, just adjusting margins and sizing at larger screens.
Desktop
1
2
3
4
Tablet
1
2
3
4
Mobile
1
2
3
4
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.container { padding: 0 2rem; }
}
@media (min-width: 1200px) {
.container { max-width: 1200px; }
}
🔀 Layout Shifter Pattern
Most responsive pattern with different layouts for each breakpoint.
Desktop
1
2
3
4
Tablet
1
2
3
4
Mobile
1
2
3
4
/* Mobile: Stack vertically */
.container { display: flex; flex-direction: column; }
/* Tablet: 2x2 grid */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* Desktop: Complex layout */
@media (min-width: 1024px) {
.container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
}
🔧 Tiny Tweaks Pattern
Makes small changes like adjusting font sizes, spacing, and minor layout tweaks.
Desktop
Large Heading
This is larger text with more spacing between elements for comfortable desktop reading.
Tablet
Medium Heading
Medium text with adjusted spacing for tablet screens.
Mobile
Small Heading
Smaller text with tighter spacing for mobile screens.
/* Base mobile styles */
h1 { font-size: 1.5rem; margin: 1rem 0; }
p { font-size: 1rem; line-height: 1.4; }
button { padding: 0.75rem 1rem; }
/* Tablet adjustments */
@media (min-width: 768px) {
h1 { font-size: 2rem; margin: 1.5rem 0; }
p { line-height: 1.5; }
}
/* Desktop refinements */
@media (min-width: 1024px) {
h1 { font-size: 2.5rem; margin: 2rem 0; }
p { font-size: 1.125rem; line-height: 1.6; }
button { padding: 1rem 2rem; }
}
📄 Off Canvas Pattern
Navigation and content slide in from off-screen, great for mobile navigation.
.off-canvas-nav {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100vh;
background: #333;
transition: left 0.3s ease;
z-index: 1000;
}
.off-canvas-nav.active {
left: 0;
}
@media (min-width: 768px) {
.off-canvas-nav {
position: static;
left: auto;
width: auto;
display: flex;
}
}
🖼️ Responsive Images
Learn techniques for serving optimal images across different devices:
📷 Responsive Image
Scales with container
Resize me!
img {
max-width: 100%;
height: auto;
}
/* Or for more control */
.responsive-img {
width: 100%;
height: auto;
object-fit: cover;
}
📱 400w
Mobile: 400px image
📱 800w
Tablet: 800px image
🖥️ 1200w
Desktop: 1200px image
<img src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Responsive image">
WebP
Modern browsers
JPEG
Fallback
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.avif" type="image/avif">
<img src="image.jpg" alt="Description">
</picture>
/* With media queries */
<picture>
<source media="(min-width: 800px)"
srcset="large.jpg">
<source media="(min-width: 400px)"
srcset="medium.jpg">
<img src="small.jpg" alt="Description">
</picture>
<picture>
<!-- Desktop: Landscape crop -->
<source media="(min-width: 800px)"
srcset="hero-landscape.jpg">
<!-- Mobile: Portrait crop -->
<source media="(max-width: 799px)"
srcset="hero-portrait.jpg">
<!-- Fallback -->
<img src="hero-landscape.jpg"
alt="Hero image">
</picture>
💪 Responsive Design Challenge
Test your responsive design skills by creating adaptive layouts:
🎯 Challenge: Create a Responsive Card Layout
Build a card layout that adapts from single column on mobile to multiple columns on larger screens.
Requirements:
- 📱 Mobile (320px+): Single column, full width cards
- 📱 Tablet (768px+): Two columns with gap
- 💻 Desktop (1024px+): Three columns with larger gap
- 🖥️ Large (1200px+): Max-width container, centered
Your CSS:
Live Preview:
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
💡 Tip: Start with mobile-first approach using min-width media queries!
📚 Responsive Design Best Practices
📱 Mobile-First Approach
- Start with mobile styles as base
- Use
min-widthmedia queries - Progressive enhancement for larger screens
- Better performance on mobile devices
🎯 Common Breakpoints
480px- Large mobile768px- Tablet portrait1024px- Tablet landscape / Small desktop1200px- Desktop1440px- Large desktop
🖼️ Images & Media
- Always use
max-width: 100% - Implement
srcsetfor different densities - Use
pictureelement for art direction - Optimize images for different screen sizes
⚡ Performance
- Minimize HTTP requests
- Use efficient CSS selectors
- Optimize critical rendering path
- Consider using CSS Grid and Flexbox
🎨 Design Principles
- Maintain visual hierarchy across devices
- Ensure touch targets are at least 44px
- Use relative units (rem, em, %)
- Test on real devices, not just browser tools
🔧 Testing & Tools
- Use browser developer tools
- Test on multiple devices and browsers
- Validate HTML and CSS
- Use accessibility testing tools