Why it matters
Most visits to small business sites now come from phones, and the most common responsive bug is a page that scrolls sideways: one fixed-width image or table pushes everything off the screen. WCAG 1.4.10 asks that content works at 320 CSS pixels wide without scrolling in two directions.
Resizing a browser window by hand misses widths, and phone emulators show one size at a time. This tester shows them side by side, and for pasted HTML measures overflow at every width and tells you which element causes it.
How to use it
- Choose A web address or Paste HTML.
- Tick the screen sizes to test, or add a custom width.
- Press Show previews and scroll through them.
- For pasted HTML, read the overflow results, then copy the report or media query starter.
FAQ
Why is a preview blank?
Many sites send a header (X-Frame-Options or a frame-ancestors policy) that stops other sites showing them in a frame. That's a good security setting. Paste the page's HTML instead.
Why can't it measure overflow for a URL?
Browsers don't let one site look inside another site's page, for good security reasons. Pasted HTML is rendered in a frame this tool can measure.
Do scripts run in pasted HTML?
No. The frame is sandboxed with scripts off and nothing fetched, so test the layout and styles rather than behaviour.
Which widths matter most?
320px (the WCAG reflow width and small phones), 390px (most current iPhones), 768px (tablets) and 1280px (laptops).
