Website scrolls sideways on mobile? Causes and fixes

Key takeaways

When a website scrolls sideways on mobile, something on the page is wider than the screen. It is nearly always one element: an image, a table, an embedded map or a long web address. The page wobbles as visitors scroll, content is cut off at the edge, and the site feels broken. Finding the culprit takes minutes.

• One element wider than the screen makes the whole page scroll sideways.
• Usual culprits: images, tables, embeds, long links and fixed-width boxes.
• WCAG expects content to reflow at 320 CSS pixels wide without sideways scrolling.
• Hiding the overflow masks the symptom and can hide content.

Why does a website scroll sideways on mobile?

A website scrolls sideways on mobile when at least one element is wider than the viewport. The browser has to make room for it, so the page becomes wider than the screen and can be dragged left and right. Everything else on the page may be perfectly responsive.

It matters for three reasons. Visitors lose their place while scrolling down. Content at the right edge, often a button or the end of a sentence, is cut off. And it signals carelessness on the device most of your visitors use. Google's original mobile-friendly criteria in 2015 included avoiding horizontal scrolling.

• Why mobile-friendly web design is essential for UK businesses
• Make your website work properly on mobile

What are the usual causes?

Seven causes account for almost every case. Most were added after the site was built, by someone pasting in content or installing a widget, which is why a site that once behaved can start to scroll sideways.

• An image with a fixed pixel width larger than the screen.
• A table with too many columns to fit.
• An embedded map, video or booking widget with a fixed width.
• A long web address or email address that cannot wrap.
• A box or section set to a fixed width in pixels.
• An element positioned partly off screen, such as a decorative shape or slide-in panel.
• A full-width section set wider than the screen by a rounding or scrollbar quirk.

• Tables and price lists on mobile: make them readable

How do you find the element responsible?

Scroll the page sideways on your phone and look at what sticks out at the right-hand edge as you move down. The culprit is usually visible: a picture, a table or a map that runs past everything else. Note which page and which section, because the cause is often on one page only.

If nothing is obvious, a developer can find it quickly in Chrome DevTools by setting the screen to a phone width and inspecting elements that extend beyond the page. Checking at 320 pixels wide, the smallest common phone width, catches problems that a larger phone hides.

• Test each page type: home, service, blog post, contact and landing pages.
• Check in portrait at the narrowest phone you can find.
• Look for the widest thing on the page at the point where it scrolls.
• Remove recently added content or widgets one at a time to isolate it.

• Which devices should you test your website on?

How is each cause fixed?

Each cause has a standard fix, and most are a line or two in the stylesheet. Images and embeds are told never to exceed the width of their container. Long strings are allowed to break. Fixed-width boxes are given flexible widths. Tables need a design decision.

• Images and video: set a maximum width of 100% so they shrink to fit.
• Embeds: wrap maps and iframes in a container that scales.
• Long links: allow them to wrap, or replace the text with a short label.
• Fixed-width boxes: change to percentages or a maximum width.
• Off-screen decoration: contain it within its section.
• Tables: stack, simplify or let the table alone scroll inside its own frame.

• Optimise website images for speed and search

Why not simply hide the overflow?

Because it hides the symptom and keeps the fault. A common quick fix tells the page to hide anything that overflows horizontally. The sideways scroll stops, but the oversized element is still there, and whatever part of it sat beyond the edge is now invisible and unreachable.

If that hidden part was the last column of a price table or the submit button of an embedded form, you have swapped a cosmetic problem for a functional one. Used as a last safeguard after the real cause is fixed, hiding overflow is reasonable. Used instead of a fix, it is how content goes missing.

What does accessibility guidance say?

WCAG success criterion 1.4.10, Reflow, at level AA, expects content to be presented without scrolling in two dimensions at a width equivalent to 320 CSS pixels. In practice that means a page should scroll vertically only on a small phone. The criterion exempts content that needs two dimensions to be understood, such as maps, diagrams and data tables.

So a wide data table may scroll sideways within its own frame and still meet the guidance. The whole page scrolling sideways because of that table does not. The difference is whether the visitor can read the rest of the page normally.

• Mobile accessibility: the WCAG checks for small screens

What does this look like in practice?

A pattern we see on sites that staff update themselves: a new team photo is uploaded at 2,400 pixels wide into a text block, or a supplier's booking widget is pasted in with a fixed width of 600 pixels. The page looked fine on the laptop where it was edited. On phones, that one page now slides sideways.

Nobody connects the complaint 'the site is broken on my phone' with last Tuesday's edit. A site-wide rule that caps images and embeds at the width of their container prevents the whole category. Global Bridge Labs (GBL) adds that safeguard to every build so that content edits cannot break the layout.

• See client work
• Website Design & Development for UK businesses

Next step

Open each main page on a phone and try to drag it left. If any page moves, note what is sticking out at the edge and you have found your fix list.