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.
By Noble Erne, LLC · 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.
Published by Noble Erne, LLC. Enterprise systems consultant with a background in SAP implementation, software documentation, and instructional design. Builds the tools and writes the explainers on this site. Corrections to this guide go to the contact page and are reviewed before publication.
Related guides
- The screen sizes that actually matter in 2026
Forget the 50-row resolution charts. A handful of sizes cover most of the web’s traffic — here they are, and how to think about the rest. - Device pixel ratio: why your 4K phone reports 390 pixels
Physical pixels, CSS pixels, and the 2×/3× multiplier between them — the concept that explains most "why is my image blurry" mysteries. - Viewport vs screen resolution: the difference that breaks layouts
Your screen is 1920 wide but your website gets 1050. Where the pixels go, and why designing to "screen sizes" is subtly wrong.