Content overflows the screen width

The page is loaded in a real browser at three widths: 390, 768 and 1440 px (config/design.json#viewports), and at each the document width is compared with the window width. The finding is raised when the document exceeds it by more than 2 px (thresholds.overflowTolerancePx, a rounding tolerance).

Severity scales with breadth of impact: when overflow appears at enough viewports of the same page, the finding is raised to critical; otherwise it stays a warning. The three measurements of one page are merged into one row in the report, not three near-identical ones.

What the check does not do: it does not tell you which element overflows (only that the document is wider), it examines no widths other than those three, and it cannot see overflow that appears after an interaction (after opening a menu or a consent bar).

The finding is page-level. It comes with an annotated screenshot marking the spot, when the module managed to determine a bounding box.

For visibility in AI answers there is no effect at all and we will not pretend otherwise: overflow is a property of rendering, not of content. The text in the HTML is the same whether it fits the screen or not.

What it is, though, is the one category of finding in the whole audit a customer can verify in ten seconds. Open the site on a phone and swipe right. Either the page moves sideways or it does not.

Why it matters: horizontal scrolling on a phone is one of the most frustrating things on the web. Text runs off screen, a button is half hidden, and the visitor cannot tell whether it is broken or meant to be that way. A large share of traffic now comes from phones. And an overflowing page is worse for them than a slow one.

The practical conclusion: fix it for people. It is a recommendation with no search engine behind it, and that takes nothing away from the finding. It only changes its reason.

You will find the culprit in a browser in a minute. Open the console at the width where it happens and list every element extending past the window:

document.querySelectorAll('*').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > window.innerWidth + 1) console.log(Math.round(r.right), el);
});

The list will be short and it is nearly always one of these five:

1. A table. Wrap it in a container with overflow-x: auto. Let the table scroll, not the page. Also reported by DSG-07.
2. A long URL or long word in body text. overflow-wrap: anywhere on the content block.
3. An image with no width limit. max-width: 100%; height: auto.
4. Preformatted code (<pre>). Same as the table: its own scrollbar.
5. A fixed pixel width somewhere in the layout. width: 1200px always overflows on a phone; use max-width.

And a trap people routinely fall into while fixing this: overflow-x: hidden on <body> does not solve the problem, it hides it. The content stays off screen, only now unreachable: a broken page becomes a broken page without a scrollbar. On some devices it also breaks smooth scrolling. Fix the cause, not the symptom.