A breakpoint is a screen width at which a website’s layout changes to suit the space available. Below one breakpoint the menu might collapse into a button; above another, a single column of content might spread into three. Breakpoints are what make responsive design work.
How breakpoints work
A breakpoint is written in the site’s CSS as a media query: a rule that applies only when the screen is at least, or at most, a certain width. A typical set might use one layout for phones, a second from about 768 pixels for tablets and a third from about 1,024 pixels for laptops. Those numbers are conventions, not standards. Each site should choose its own.
Most modern sites are built mobile first. The basic styles describe the phone layout, and each breakpoint adds to it as the screen gets wider. Building the other way round, from desktop down, often leaves phones with a squeezed version of a layout never designed for them.
Good developers set breakpoints where the content starts to look wrong rather than where a particular phone happens to be. If a line of text becomes too long to read comfortably at 900 pixels, that is where a change belongs, whatever device sits at that width. Newer techniques such as container queries, which let a single component respond to the space it sits in rather than the whole screen, are supported in current browsers at the time of writing (October 2026) and reduce how many page-wide breakpoints a site needs.
Why it matters
For many UK businesses, especially local services and shops, a large share of visits arrives on phones. Your own analytics will tell you the split. If the layout breaks at a common width, those visitors see overlapping text, buttons too small to tap or a page that scrolls sideways, and they leave.
It matters for search as well. Google uses the mobile version of your pages for indexing and ranking under mobile-first indexing. If content or links are removed at a mobile breakpoint rather than simply rearranged, Google may never take them into account.
Paid traffic makes the cost obvious. Clicks from social media ads very often come from phones, so a landing page that falls apart below 400 pixels wastes money on every visit.
Common mistakes
- Approving a design only from desktop mock-ups and leaving mobile to the developer’s guesswork.
- Testing on one iPhone and one laptop, and never checking the awkward widths in between, such as a tablet held sideways.
- Hiding sections, tables or links on mobile to save space instead of redesigning them for a small screen.
- Using fixed widths for images or tables, which forces the page to scroll sideways on phones.
- Adding a new breakpoint for every problem until the CSS has a dozen overlapping rules nobody understands.
How to act on it
Open your site in a desktop browser, open the developer tools and switch on the device toolbar. Then drag the width slowly from wide to narrow and watch for the moment anything overlaps, wraps badly or disappears. Those moments are your problem breakpoints.
Next, check your analytics for the devices and screen sizes your visitors actually use, and test the most common ones on real handsets. Pay particular attention to forms, menus, tables and pricing sections.
If you are commissioning a new site, ask for mobile designs alongside desktop ones and agree what happens to each section at each width. I set that out in the brief for every website redesign, because fixing layout after launch costs far more than designing it properly at the start.