Breakpoint

A breakpoint is a defined screen width at which a responsive website’s layout deliberately changes shape — a three-column row becoming two columns, then one, as the screen narrows — implemented in CSS using media queries that apply different rules above and below the chosen width.

Why breakpoints should follow the content, not a device list

The more durable approach sets breakpoints where the actual content genuinely stops looking right — where a row of items starts feeling cramped, where text begins wrapping awkwardly — rather than targeting the exact pixel width of specific popular phone or tablet models. Device screen sizes vary continuously and change with every new model released, so a breakpoint tuned to today’s popular devices can be wrong for a device released after the site was built. A breakpoint chosen at the point the content itself needs it remains correct regardless of which specific devices exist.

Common breakpoint widths, as a starting reference rather than a rule

Most responsive grid systems ship with a small set of conventional breakpoint widths as a starting point — roughly 480px for a narrow phone screen, 768px for a tablet or a phone in landscape, and 1024px and above for a typical desktop layout, with the columns in the underlying grid changing at each one. These numbers are a sensible default to start a build from, not a specification: the point made above still applies, and a layout’s actual breakpoints should move away from these defaults wherever the specific content and column count need them to.

What a breakpoint does not guarantee

Meeting a breakpoint correctly at a small number of tested screen widths does not confirm every width in between behaves correctly — a site checked only at a phone width and a desktop width can still have a genuinely broken middle ground at an intermediate screen size, such as a tablet in portrait orientation. Testing at more than the two extremes catches this category of failure, which is a basic web usability check regardless of how many breakpoints the layout defines.

What to do next

Checking a site’s actual behaviour by slowly resizing a browser window, rather than only testing at a phone width and a desktop width, reveals whether its breakpoints are set sensibly. For where this kind of responsive layout decision fits into a build, website design services covers the service scope it belongs to.