How to choose responsive breakpoints (without cargo-culting)
768 and 1024 are fossils of the 2010 iPad. Let content decide where your layout bends, with a sane default set if you must have numbers.
5 min read · Reviewed July 2026
The classic breakpoints — 768, 1024 — are the exact dimensions of the 2010 iPad. The industry hardcoded one Apple product into a decade of CSS. Devices moved on; the numbers stayed. If you're picking breakpoints by copying a framework's defaults, you're designing for a museum piece.
Content-out beats device-in
The sturdier method: resize your actual layout from narrow to wide and add a breakpoint where the content starts to fail — a line of text passing ~75 characters, a card row that could fit another card, a sidebar that's earned its place. Those bend points come from your typography and components, so the layout works on devices that don't exist yet. This is also why modern CSS is drifting toward container queries: components deciding for themselves.
Do it empirically: open the live viewport readout on our homepage beside your layout, drag until something looks wrong, note the number. That's your breakpoint. Repeat two or three times and you're done — most sites genuinely need only three or four.
If you just want defaults
A defensible 2026 set: ~640 (large phones/small tablets), ~1024 (the tablet-to-laptop boundary), ~1280 (roomy desktop), plus a content max-width around 1440 so ultrawide users don't get 40-word lines. Write them in rem so browser zoom behaves, use min-width (mobile-first) consistently, and resist adding a breakpoint for every complaint — usually the component needs to flex, not the page.