What is horizontal scrolling (overflow) on mobile?
Definition Horizontal scrolling, or horizontal overflow, happens when some element is wider than the viewport, so the whole page can be dragged sideways and part of it sits off-screen. On phones it is one of the most common mobile layout bugs. WCAG 2.2 success criterion 1.4.10 Reflow (AA) requires content to work at 320 CSS px wide without scrolling in two directions, except for content such as data tables and maps.
How to fix it: Website wider than the screen on mobile? How to find and fix horizontal scroll
How does overflow cause sideways scrolling?
When a child element is wider than its container, it overflows. By default, overflow is visible, and if it extends past the right edge of the page, the browser makes the document wider than the viewport so the user can reach it. On a phone this shows up as a page that wobbles sideways while you scroll, a gap on the right, or, in some browsers, a page zoomed out slightly to fit the extra width.
Usual causes:
- fixed widths such as
width: 600pxon a container, form or embed; - images, videos and iframes without
max-width: 100%; - long URLs, email addresses or words that can't wrap;
- wide tables and
<pre>code blocks; width: 100vw, which on desktop includes the scrollbar;- negative margins, off-canvas menus moved with
leftinstead oftransform, and decorative elements positioned past the edge.
Example
img, video, iframe { max-width: 100%; height: auto; }
p, li, td { overflow-wrap: break-word; }
/* Wide tables scroll in their own box, not the page */
.table-wrap { overflow-x: auto; }Setting overflow-x: hidden on body hides the symptom but not the cause: content gets cut off, and it can break position: sticky. If you need to clip decorative overflow, overflow-x: clip on the specific wrapper is safer, since it doesn't create a scroll container.
Large text makes it worse
A layout that fits at default size can overflow when visitors enlarge text: a row of buttons or a long word in a heading no longer fits. That's why horizontal overflow is worth testing with text scaling at 150% and 200%.
How MobileCheck checks it
MobileCheck flags any page where content sticks out past the right edge so the page scrolls sideways, and highlights the element responsible on the screenshot. Content that scrolls inside its own box, such as a wide table in an overflow-x: auto wrapper, is not flagged. The check runs on every device and in the large text and open-menu scenarios too.
Related terms
Guides and tools
- Website wider than the screen on mobile? How to find and fix horizontal scroll
- Responsive design checker