This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Fixing horizontal scrolling: why content extends past the edge
A page shouldn't be able to scroll sideways on any device. If it does anyway, a single element extends beyond the device width — the check states the overhang in pixels and, where it can attribute it unambiguously, the element causing it.
- The cause is almost always an element with a fixed width: a table, an embedded video, an image with no maximum width, or long text with no way to wrap — an address or a file name with no spaces, say.
- The effect doesn't stand out at a desk: at 1440 pixels, almost everything fits. Only at 390 pixels does the element overhang, and the whole page becomes scrollable — with the familiar result that the text slides sideways when scrolling.
- You can find the culprit by hiding elements one by one until the scrolling disappears. Our report anticipates this step where the selector is unambiguous enough, and attaches an evidence screenshot with the element marked.
FAQ
Why don't I see the problem on desktop?
Because there's enough room there. An element with a fixed width of 500 pixels fits inside a 1440-pixel window and breaks a 390-pixel screen. Check with a narrow window, or in your browser's device view.
Does overflow-x: hidden help?
It hides the symptom and creates a new one: the content then becomes unreachable, instead of just poorly reachable. The cause needs to go, not the scrollbar.
What about long words with no spaces?
They're their own common case — addresses, file names, technical terms. CSS has wrapping rules for this; without them, a single word can push the whole page wide.