Search pages
Search all CSS Showcase pages by name
Responsive Design
Build websites that look amazing on every device. Master media queries, fluid layouts, responsive images, and mobile-first development strategies.
Responsive Design Fundamentals
Responsive design ensures your website adapts seamlessly to any screen size — from phones to tablets to desktops. It's not just about making things smaller; it's about creating optimal experiences for each device.
Every responsive website needs this tag in the <head>. It tells mobile browsers to use the device's actual width instead of a virtual desktop viewport.
%: Relative to parent element — great for fluid layouts
rem: Relative to root font-size — consistent scaling across components
em: Relative to current font-size — component-level scaling
vw/vh: Viewport-relative — full-width/height sections
vmin/vmax: Smaller/larger viewport dimension
Media Queries
Media queries let you apply different styles based on device characteristics like screen width, height, orientation, or resolution. They're the foundation of responsive design.
Start with mobile styles as the default, then layer on complexity for larger screens using min-width. This keeps mobile CSS lean and fast.
Mobile-First vs Desktop-First
Mobile-first (recommended): Start with mobile styles, then add complexity for larger screens using min-width. Easier to maintain and better performance on mobile devices.
Desktop-first: Start with desktop styles, then override for smaller screens using max-width. Can lead to bloated mobile CSS as you're removing desktop complexity.
Fluid Typography
Fluid typography scales smoothly between minimum and maximum sizes based on viewport width. No more jarring jumps between breakpoints!
Resize your browser to see me scale smoothly!
How it works: clamp() accepts three values — minimum, preferred (typically viewport-based), and maximum. The browser calculates the preferred value, but constrains it between min and max.
This creates smooth scaling across all viewport sizes without media queries!
Responsive Images
Images need special attention in responsive design. Serve appropriately sized images to save bandwidth and improve performance.
Setting max-width: 100% and height: auto on images ensures they never overflow their container while maintaining their aspect ratio.
<!-- srcset: serve different images for different screen sizes -->
<img
src="image-800w.jpg"
srcset="image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Responsive image"
>
<!-- picture element: art direction (different crops for different sizes) -->
<picture>
<source media="(min-width: 1024px)" srcset="wide-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="mobile-image.jpg" alt="Adaptive image">
</picture>Responsive Layout Patterns
Common patterns for adapting layouts across screen sizes.
Device Preview
See how the same layout adapts across mobile, tablet, and desktop. The preview uses container queries to respond to its actual width — just like real responsive components.
Responsive Design
Content that adapts to every screen
Desktop: Three-column grid, spacious layout, horizontal navigation.
Container Queries (Modern)
Container queries let components respond to their container's size instead of the viewport. This enables truly reusable, context-aware components.
Container queries move responsive logic from the viewport to the component level. A card can adapt based on its actual available space, not the browser window.
For a deep dive into container queries, check out the dedicated Container Queries page.
Best Practices
Essential guidelines for building responsive websites that are fast, accessible, and delightful to use.
- Optimise images: Use modern formats (WebP, AVIF) and appropriate sizes
- Minimise JavaScript: Mobile CPUs are slower — keep JS lightweight
- Use system fonts: Save bandwidth by using fonts already on the device
- Lazy load: Load images and content as users scroll to them
- Test on real devices: Simulators don't capture real-world performance
- Test on actual mobile devices (iOS and Android)
- Verify touch targets are large enough (44×44px minimum)
- Check text readability without zooming
- Test forms on mobile keyboards
- Verify images load quickly on 3G
- Check horizontal scrolling (should be none!)
- Test both portrait and landscape orientations
Responsive Design Tips
Mobile-First Always
Start with the smallest screen and progressively enhance. This keeps mobile CSS lean and prevents you from fighting desktop overrides.
Use clamp() for Fluid Sizing
Replace fixed font sizes and spacing with clamp(). Fewer breakpoints, smoother scaling, better UX.
auto-fit + minmax()
Let CSS Grid handle responsiveness automatically with repeat(auto-fit, minmax(250px, 1fr)). Zero media queries needed.
Keep Learning
Ready to dive deeper into layout techniques that complement responsive design?