Horizontal scroll on mobile: the usual causes

What causes horizontal scroll

Horizontal scrolling happens when something on the page is wider than the viewport. On a phone that means the reader has to pan to read a line, and text that runs off the edge is often not seen at all.

Three things cause most of it. A fixed pixel width wider than a phone screen, which was a desktop measurement that survived. A table, which lays out to its content rather than to its container. And an iframe with a width attribute, most often an embedded video or map.

What squirrel checks

The rule runs on every crawled page and collects three signals from the markup:

• Elements whose inline style declares a width as an integer number of pixels above 500. A fractional value such as width: 500.5px is not matched.
• Every table on the page.
• Every iframe carrying a width attribute.

It emits a single check named horizontal-scroll:

• Info when any signal was found. Message: Elements may cause horizontal scroll on mobile, listing what was found as 2 fixed-width element(s), 3 table(s) - ensure responsive and 1 iframe(s) with fixed width.
• Pass when none was. Message: No obvious horizontal scroll issues detected.

Nothing is rendered or measured, so these are candidates rather than confirmed overflow. Every table on the page is listed regardless of how wide it is, and a fixed width in an external stylesheet is not seen at all. Severity for the rule is warning, weight 5.

How to fix it

img, video { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }

Replace fixed widths with max-width, wrap tables in a container that scrolls on its own, and give embedded iframes a responsive aspect-ratio box instead of width and height attributes.

Confirm in a browser at a narrow viewport. Comparing document.documentElement.scrollWidth with clientWidth finds the actual overflow.

Enable / disable

Disable this rule

[rules]
disable = ["mobile/horizontal-scroll"]

Disable all Mobile rules

[rules]
disable = ["mobile/*"]

Enable only this rule

[rules]
enable = ["mobile/horizontal-scroll"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• mobile/viewport: the tag that makes the viewport the device width.
• images/dimensions: image sizing, another overflow source.
• a11y/touch-targets: the other check that depends on a page fitting the screen.
• mobile/font-size: text that does not fit for a different reason.

Mobile findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Understanding reflow, WCAG 2.2
• Page experience, Google Search Central

Check your site

Run squirrel audit https://example.com and open the Mobile section of the report. Each page is listed with the elements that might overflow it. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.