Responsive Design
A design approach where layouts and content adapt fluidly to different screen sizes.
Plain English
Responsive design means the same HTML works on a 375px phone and a 2560px monitor. Instead of building separate mobile and desktop sites, one responsive layout reflows, resizes, and reorganises based on the available space. The key insight is that this is not about making the desktop site fit on mobile — it is about designing for the smallest screen first and adding complexity as more space becomes available.
Technical
Implemented with CSS media queries (@media), relative units (%, vw, rem, clamp()), flexible layouts (Flexbox, Grid), and fluid typography. The main breakpoints: 375px (small mobile), 640px (large mobile), 768px (tablet), 1024px (small desktop), 1280px (desktop), 1536px (wide). Mobile-first approach: start with mobile styles as default, add complexity at larger breakpoints. Use min-width queries for mobile-first, max-width for desktop-first. Test with real devices, not just Chrome DevTools.
Live Demo
Responsive Design
Mobile — 80px
Tablet — 140px
Desktop — full
Design mobile-first. Add complexity as viewport grows — don't subtract it.
Usage
✓ Good usage
Design mobile-first: single-column layout by default, grid at 640px, 3-column at 1024px — the layout adds complexity as space allows.
✗ Bad usage
Designing at 1440px then trying to squash it to 375px — "mobile responsive" becomes just making everything smaller rather than redesigning for the context.
Recommended values
- sm: 640px — large mobile / landscape
- md: 768px — tablet portrait
- lg: 1024px — small desktop / tablet landscape
- xl: 1280px — standard desktop
- 2xl: 1536px — wide desktop
- Always test at 375px (iPhone SE width) and 320px (minimum)
Common mistakes
- Fixed pixel widths on components — they overflow or are too small at other sizes.
- Testing only in Chrome DevTools — real device behaviour often differs.
- Ignoring touch interaction on mobile — targets must be at least 44x44px.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design mobile-first. Default: single column, 16px gutters, 16px padding. At 640px: two columns. At 1024px: three-column grid. At 1280px: max-width container. All interactive targets 44×44px minimum on mobile. Test at 375px, 768px, and 1280px.