Updated 2026-07-23 · 10 min read
Responsive design is not "add a few breakpoints at the end." It is designing content that reflows and remains understandable at any width, from a 320px phone to an ultrawide monitor. The reliable method is mobile-first: design the smallest useful layout, then add complexity as space allows.
Begin with the single-column phone layout where hierarchy is most brutal — you cannot hide weak content behind decoration on a narrow screen. Once the small view is genuinely good, use min-width media queries to progressively enhance for wider viewports. This produces simpler CSS and forces better priorities than shrinking a desktop design down.
Do not chase specific phone models. Add a breakpoint wherever the layout starts to break — a line gets too long, a grid looks sparse, or two columns would now fit. Common ranges that work as a starting point: a small-phone base, ~600px for large phones, ~900px for tablets, ~1200px for desktop, and an optional cap for very wide screens. Adjust to your content.
Instead of stepping font sizes at each breakpoint, scale them smoothly. A single clamp() value sets a minimum, a preferred viewport-relative size, and a maximum:
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; }
body { font-size: clamp(1rem, 1vw + 0.9rem, 1.125rem); }
This keeps the hero headline confident on desktop without overflowing on a phone, with far less media-query noise.
"Make it responsive" is too vague for a person or an AI tool. Specify the change: two columns stack with text first; navigation collapses to a menu; section padding drops from 120px to 64px; a card grid becomes a single column (or a horizontal swipe only if content stays understandable). Explicit transformations prevent the awkward mid-sizes where nothing quite fits.
Flexbox and Grid remove many breakpoints entirely. grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) creates a grid that reflows on its own. flex-wrap handles toolbars. Container queries let a component respond to its own space rather than the viewport, which is ideal for reusable cards. Reach for these before adding manual breakpoints.
Responsive and accessibility overlap heavily; solving one usually helps the other.
Use device emulation for a first pass, but always verify on a real phone and a real slow connection — emulators hide performance problems. Check the true edges: 320px width, long unbroken words in headings, the largest realistic content in every container, and both orientations. The failures live at the extremes, not the common sizes.
Choose breakpoints from your content, not device models — add one wherever the layout starts to break. A useful starting set is a small-phone base, ~600px, ~900px, ~1200px and an optional wide cap, then adjust to your design.
Mobile-first means designing the smallest single-column layout first, then using min-width media queries to enhance for larger screens. It produces simpler CSS and forces clearer content priorities than scaling a desktop design down.
clamp(min, preferred, max) scales font size smoothly with the viewport between a floor and ceiling, so headlines stay confident on desktop without overflowing on phones — with far fewer breakpoint-specific font rules.