Breakpoints belong at content failure widths, not at device names

What it is

You set a breakpoint at 768 because “that is a tablet,” while the table already grows a horizontal scrollbar at 900. From 768 to 899 you are still in the desktop column plan and the content is already broken. A breakpoint marks the width where this layout stops holding, not a marketing name from some year’s hardware.

Fluid versus snap is a different group’s strategy. Container queries measure a component’s own width, not the viewport. This leaf only asks where the viewport number comes from.

Why it happens

Device widths are a continuous distribution: “phone” already spans tens of pixels, plus split view, desktop windows, foldables. Model names are sparse labels, not the layout’s independent variable. That variable is each module’s minimum viable width: a table’s key columns, a nav’s labels, a three-card row’s full card. Failure widths are product-specific, so they cannot be copied from a framework default.

Device names also lag. New hardware will not move your 375 / 768 / 1024; those numbers only pretend to cover “all devices.”

Where it stops holding

OS chrome, keyboards and split-view minima sometimes force alignment to a system breakpoint. That is a platform constraint; still write it as “the shell changes structure at W,” not “iPad.” A marketing page with one line and one image may need no breakpoint at all — just follow width.

Print, projection and e-ink fail at different widths from emissive screens. One viewport media query should not be asked to cover every output.

Applying it

• Drag 320 to 1440 and note widths where something overflows, clips, becomes a half column, or drops the primary button out of view. Those numbers are candidate breakpoints.
• If a current breakpoint can only be explained with a device name, not a failing module, delete it and let the neighbouring failure width take over.
• How to check: a table — left column current breakpoints, right column “which module turns from broken to ok here.” Delete any row whose right cell has no module name. Screenshot ±10 px around each remaining failure width and confirm that module actually repairs, rather than a background tint changing.

Related

• Same group: F2.10.2 Layouts must stay usable between breakpoints · F2.10.3 Extra breakpoints multiply the cost of checking
• Nearby: F2.11 Fluid and adaptive layout · F2.15 Container queries and component-level response · F1.11 Above the fold
• Search terms: content breakpoint · viewport · min-width media · failure width