Responsive breakpoints explained for business owners

Key takeaways

Responsive breakpoints are the screen widths at which a website's layout changes, for example from one column to two. You do not need to set them yourself, but knowing what they are helps you spot where a site breaks, usually at the awkward widths between a phone and a laptop, and ask for the right fix.

• A breakpoint is a width at which the layout rearranges.
• Good breakpoints are set by the content, not by a list of device models.
• Most sites break in between: tablets, small laptops and phones held sideways.
• Test by dragging a browser window slowly from wide to narrow.

What are responsive breakpoints?

A responsive breakpoint is a screen width at which a website's stylesheet applies different layout rules. Below the breakpoint the page might show one column and a collapsed menu. Above it, two columns and a full menu. The rules are written as media queries, a standard feature of CSS.

A typical business site has three or four. Between them, the layout stretches and shrinks fluidly. At each one, it rearranges. Done well, a visitor never notices. Done badly, there are widths where text is squeezed into a sliver, images overlap or the menu wraps onto two lines.

• Why mobile-friendly web design is essential for UK businesses
• What is responsive web design? A plain-English guide

Which widths do sites usually use?

There is no official set. Phones in portrait are typically around 360 to 430 CSS pixels wide, tablets around 768 to 1,024, and laptops 1,280 and above. Many frameworks therefore place breakpoints somewhere near 600, 900 and 1,200 pixels. Those are conventions, and new devices fall between them every year.

Google's web.dev guidance is explicit that breakpoints should not be defined by device classes, products or brands. It recommends designing for a small screen first, then widening the window until the layout starts to look wrong, and adding a breakpoint there. The content decides.

• Small: one column, stacked sections, collapsed menu.
• Medium: two columns where content allows, larger images.
• Large: full menu, multi-column layouts, wider margins.
• Extra large: a maximum content width so lines of text do not become too long.

• Mobile-first vs responsive design: what is the difference?

Where do sites break between breakpoints?

Sites break at the widths nobody looked at. Designers usually produce a phone layout and a desktop layout. Everything in between is left to the developer and the stylesheet, and those in-between widths are where real devices live: tablets, small laptops, large phones held sideways and browser windows that are not full screen.

• Tablet portrait: a desktop menu too wide to fit, wrapping onto two lines.
• Small laptop: three columns squeezed so narrow that text wraps every two words.
• Phone landscape: a sticky header and footer leaving a letterbox of content.
• Just above a breakpoint: a two-column layout with columns too thin to read.
• Very wide screens: text lines stretching the full width of the monitor.

• Website scrolls sideways on mobile? Causes and fixes

How do you test your site's breakpoints?

Open the site on a laptop and drag the browser window from full width down to as narrow as it will go, slowly, watching the page the whole time. Every point where something overlaps, wraps awkwardly or leaves a strange gap is a width a real visitor will see. Note the pages and take screenshots.

Then check on real devices: a phone in both orientations and a tablet if you can borrow one. In Chrome DevTools, device mode lets a developer set any exact width, which is useful for confirming the pixel at which a problem starts.

• Which devices should you test your website on?

What should you ask your developer?

Ask how the breakpoints were chosen and whether the layout was reviewed between them. A good answer mentions the content, a mobile-first stylesheet and testing across a range of widths. A weak answer is a list of device names.

• Which breakpoints does the site use, and why those?
• Is the stylesheet written mobile-first?
• Has each template been checked at in-between widths?
• Is there a maximum width for text so lines stay readable?
• What happens on a phone in landscape?

• Mobile acceptance criteria to put in a website contract

Do tablets still deserve attention?

A little. StatCounter put tablets at about 5% of UK web traffic in September 2026, so they are a small share for most sites. They matter more for audiences who browse at home in the evening, for older users and for businesses whose staff or customers use tablets on site.

The trade-off is effort against audience. You do not need a bespoke tablet design. You need the site to behave sensibly at tablet widths, which a content-led set of breakpoints delivers anyway. Check your own analytics for tablet share before spending more than that.

• Mobile web traffic in the UK: how much is on phones?

What does this look like in practice?

A pattern we see on sites approved from two mock-ups: the phone layout and the desktop layout are both polished. On an iPad held upright, the desktop navigation is shown, and because seven menu items do not fit, the last two drop onto a second line and overlap the hero heading.

The fix is a single change: switching to the collapsed menu at a wider point than the template default. It was missed because nobody opened the site at that width. Global Bridge Labs (GBL) reviews each template by dragging through the full range of widths, not by checking two fixed sizes.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Next step

Spend five minutes dragging your browser window narrow on your three most important pages. Wherever the layout stumbles, you have found a breakpoint that needs moving.