Mobile horizontal scrolling

Silktide checks whether your pages scroll sideways on mobile phones. Content should fit the width of a small screen, so visitors only ever scroll down.

Why this matters

When a page is wider than the screen, part of every line of text sits out of view, and the reader has to drag back and forth to follow the content. That is tiring for everyone and a real barrier for people with low vision (who often also magnify the page) and people with motor impairments. WCAG success criterion 1.4.10 (Reflow, of ) requires content to fit a 320 pixel wide screen without scrolling in two dimensions.

Usually the page as a whole is fine and one element is forcing the overflow - a wide table, an image with a fixed width, an embedded video, or a long unbreakable string such as a URL.

How to fix it

Open the page on a phone (or narrow your browser window to 320 pixels) and find what pokes out of the right edge.
Fix the offending element with responsive :

/* Fixed-width element forces the page wider than the screen */
img.hero { width: 600px; }

/* Fixed: scales down to fit narrow screens */
img.hero { max-width: 100%; height: auto; }

For wide data tables, let the table scroll inside its own container (overflow-x: auto) so the rest of the page still fits the screen.
Content that genuinely needs two-dimensional layout, such as maps and diagrams, is allowed to scroll - if that is all the finding shows, you can it.

How Silktide tests this

Load the page as a mobile device.
Measure how far the page extends beyond the right edge of the screen. Overflow under 10 pixels is ignored as a rounding error.
Classify the overflow by how many devices it affects, from a slight overflow that only affects small phones (320 pixels wide, like an iPhone 5) up to overflow wide enough to affect large phones (414 pixels wide, like an iPhone 7 Plus).

Troubleshooting

This check reports horizontal overflow on pages that are otherwise mobile-friendly. Pages that don't attempt to support mobile at all - no , tiny text, extreme overflow - are reported by Mobile zoom and scrolling instead, where the fix is a responsive redesign.

I can't see any scrolling

Small overflows can be invisible on larger phones. Test at 320 pixels wide - browser developer tools let you set the exact width - and look for anything crossing the right edge.