Sybqa

Guide · responsive layout

Responsive design testing: which widths to check and what to look for

A page that looks right on your laptop can break on a phone: text clipped, controls overlapping, content that scrolls sideways. This guide lists the widths worth testing, the standard behind the narrowest one, and what to look for at each.

Facts checked

Three widths cover most layout breaks

Viewport widths and why they are worth checking
WidthRepresentsWhy check it
1440 pxA common laptop or desktop windowWide layouts expose stretched content, unbalanced columns and unused space.
390 pxA current phone in portraitWhere most layout collapses happen: navigation, tables, fixed bars, long words.
320 pxThe narrowest width WCAG reflow testsWCAG 1.4.10 requires content to work at 320 CSS px without two-dimensional scrolling; it equals 1280 px at 400% zoom.

What to look for

How Sybqa checks it

Desktop (1440 px), phone (390 px) and narrow (320 px) audits run in one warm browser, each in an isolated context. Every page or journey gets screenshots and layout checks at all three widths, and the report keys results by route and viewport so a regression at 320 px is not hidden by a pass at 1440 px.

Common questions

Do I need to test every device size?

No. Start with a wide desktop, a current phone width and 320 px. Add widths where your own analytics or your design’s breakpoints suggest a gap.

Does 320 px mean phones are 320 px wide?

Few are. 320 CSS px is the width WCAG uses to model a 1280 px viewport at 400% zoom, so it also protects people who zoom.

Sources

Try Sybqa on your site

Paste a link, review the plan, and read the evidence report. The free plan gives 10 runs a month without AI review after you sign up.

Test my site Create a free account