Building useful websites

Page scrolls sideways on mobile? Find and fix the overflow

A missing scrollbar does not prove that the page fits. Find the wide element, fix its sizing, then check that readers can still reach every word and control.

By coru · Published 2026-10-21 · Updated 2026-10-21

1. Reproduce the sideways movement

Open the published page on a phone and note where sideways movement starts: the whole page, a table, or a menu after opening it. Record the browser, width and page state. Also try the browser developer tools at 360 CSS pixels, then 320. CSS pixels describe layout size, not the physical pixels advertised for a phone.

If the whole page looks unusually tiny, check its viewport setting first. MDN describes using a viewport meta tag with width=device-width. Keep zoom available. W3C’s reflow guidance uses 320 CSS pixels for ordinary vertically read content; a single width check does not establish full accessibility conformance.

2. Find the element before changing the stylesheet

In developer tools, use the element picker near the edge of the unwanted space. Inspect the selected element and its parents. Check computed width, minimum width, padding and margins. Temporarily disable one suspicious width or no-wrap declaration at a time. Work in the browser or a preview; these experiments are clues, not saved repairs.

For a basic document-width check, run these two console statements: const page = document.documentElement; then page.scrollWidth > page.clientWidth. A true result indicates excess content width. MDN documents these measurements. A false result does not prove that all content is visible: another container may clip it.

Do not substitute the phone’s advertised width or assume window.innerWidth always equals it. Zoom and mobile viewport behavior affect measurements. Record the values and inspect the actual text and controls.

3. Match the repair to the cause

The class names below are examples for elements you have identified. Apply the relevant rule to that component, then retest its children.

Wide image: .article-image { max-width: 100%; height: auto; }. W3C’s image technique keeps an ordinary image within its containing area and preserves proportions. If the parent is already too wide, repair the parent as well.
Long address or word: .contact-text { overflow-wrap: anywhere; }. This permits a break when needed. Remove an unintended white-space: nowrap from that text. For a link, a useful short label may improve reading too.
Flex or grid child refuses to shrink: try .card-content { min-width: 0; } on the affected item. MDN explains its automatic minimum can depend on content. Its long text may still need wrapping; columns and gaps that cannot fit may need stacking.
Width plus padding: .notice { box-sizing: border-box; max-width: 100%; }. Border-box includes padding and borders in the width. It does not absorb margins or cancel a larger min-width. Inspect those separately.

4. A repair-café card: fix the width, keep the button

Coru tested an original local page for a fictional repair café on 21 October 2026 in Chrome 155.0.8059.12. The page had 16-pixel side padding, border-box sizing and a card set to width: 760px, with a booking button on its right. This was a controlled browser example, not a defect report from a real café.

At a layout width of 360, document scrollWidth was 776 and the button’s right edge was at 758. Adding overflow-x: hidden to the body left that geometry unchanged. Hiding the overflow did not make the button fit. MDN describes hidden as clipping; it does not resize the wide child.

After removing the hiding rule and adding max-width: 100% to the card, its width became 328, document scrollWidth became 360 and the button fitted. Retests at 320, 390 and 1280 also fitted. In the broken mobile example, innerWidth was 776 too: comparing scrollWidth with innerWidth would have missed this failure.

To repeat the comparison, create a padded page with a fixed-width card and a right-aligned button. Record document clientWidth, scrollWidth and whether the whole button is visible before hiding, after hiding, and after constraining the card. This tests layout, not whether booking works.

5. Let a genuinely wide table scroll locally

A comparison table may need its columns together to remain understandable. W3C allows for content whose meaning requires two dimensions. Put that table in its own wrapper, for example .table-scroll { max-width: 100%; overflow-x: auto; }, while surrounding paragraphs fit the page.

Make the scrolling discoverable with a short instruction. Test touch and keyboard access to the last column. If the wrapper needs tabindex="0" to receive keyboard focus, give it a visible focus indicator, role="region" and an accessible name tied to its visible title. MDN discusses this browser-dependent focus behavior.

6. Retest the published result

If the cause remains unclear, use the feedback form below to describe the page state, browser, width and the element you suspect. A reproducible example is more useful than “mobile is broken”.

Reload at 320, 360 and a wider viewport; also test a real phone when available. Record browser and zoom settings.
Open menus and long messages, load images, and check both language versions. Read the longest heading and address.
Use Tab to reach controls. Confirm labels, focus indicators and the complete control remain visible.
For a local table, reach its last column without making surrounding paragraphs scroll sideways.
Record: page/state ___; width ___; offending element ___; rule changed ___; before ___; after ___. Keep any unchecked states explicit.