How to fix a page that scrolls sideways on mobile
One element wider than the screen makes the whole page pan left and right on phones. Find it at 360 px, cap it with max-width:100% and let wide tables scroll inside their own box.
Step by step, with screenshots: Media queries and breakpoints: which screen sizes to design for →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Mobile-friendly test + CSP generator.
What it is
Horizontal scroll on mobile means the page is wider than the phone's screen, so visitors can drag it left and right and part of the content sits off screen. It is almost always caused by one element with a fixed width, such as a table, an embed, a wide image or a long unbroken URL.
Visitors have to pan to read each line, buttons end up off screen, and Google indexes this mobile layout as your page. Narrow phones are around 360 px wide, so an element that is 400 px wide is enough to break the whole page.
OK looks like this: at 360 px wide, nothing on the page is wider than the screen and only elements meant to scroll, such as a data table in its own box, can move sideways. getReport renders the page at phone widths and names the element that overflows.
What a passing site looks like
- The page fits every screen width from 360 to 1440 pxwarning · −2 ptseffort S
Sideways scrolling
Why it matters. When a page is wider than the phone, visitors have to pan left and right to read it, and Google indexes this mobile version, broken layout included. It is usually one fixed-width element.
- Find the element named in the technical detail and give it max-width:100% instead of a fixed width.
- Wrap wide tables in a container with overflow-x:auto, so only the table scrolls.
- Let images and embeds shrink with max-width:100%; height:auto.
Questions people ask
Why does my website scroll sideways on mobile?
Because at least one element is wider than the screen. Common causes are a table or iframe with a fixed width, an image without max-width: 100%, a long URL or word that cannot wrap, or a negative margin or 100vw element next to a scrollbar. Find the widest element and let it shrink or wrap.
How do you find the element that causes horizontal scroll?
Open the page in your browser's developer tools, switch to a 360 px phone view and scroll right: the element sticking out is the cause. You can also temporarily add a coloured outline to every element to see which one extends past the edge. getReport's technical detail names the overflowing element for you.
How do you stop a page from scrolling horizontally?
Fix the element that is too wide rather than hiding the problem: give images, videos and iframes max-width: 100% and height: auto, wrap wide tables in a container with overflow-x: auto, and let long words break with overflow-wrap: anywhere. Setting overflow-x: hidden on the body hides content instead of fixing it.
Does horizontal scroll affect SEO?
Indirectly, yes. Google indexes the mobile version of your page and considers usability, and a layout that visitors have to pan to read loses them quickly. Google's old mobile-friendly test flagged content wider than the screen as a failure; the test is gone, but the problem still costs visitors.