A page scrolls sideways on a phone when at least one element is wider than the screen. The fix is to find that element and let it fit. Hiding the overflow on the whole page (overflow-x: hidden on body) makes the scrollbar go away but leaves content cut off, and it can break sticky headers, so treat it as a last resort.
Find the element in under a minute
Open the page in Chrome at a phone width (F12, device toolbar, 375 px). Then paste this into the Console:
[...document.querySelectorAll('*')]
.filter((el) => el.getBoundingClientRect().right > document.documentElement.clientWidth + 1)
.map((el) => [el, Math.round(el.getBoundingClientRect().right)])
It lists every element that sticks out past the right edge, with how far it reaches. Hover an entry to highlight it on the page. The first few are usually the cause; the rest are their children.
Another quick way: add * { outline: 1px solid red; } in the Styles panel and scroll to the right to see which box goes beyond the screen.
Common culprits and their fixes
width: 100vw. On browsers with visible scrollbars, 100vw is wider than the page by the width of the scrollbar. Use width: 100% for full-width blocks.
Fixed widths. width: 600px on a container, an image or an embed. Use max-width: 100% and let it shrink:
img, video, iframe, embed { max-width: 100%; height: auto; }
Tables. A data table cannot shrink below its content. Wrap it so it scrolls inside its own box instead of moving the page:
.table-wrap { overflow-x: auto; }
Long words and URLs. An email address, a long product code or a URL without spaces pushes its container wider:
.content { overflow-wrap: anywhere; }
Negative margins and transforms. A full-bleed section with margin: 0 -20px or an element moved with transform: translateX(...) for an animation can overflow. Check elements with negative margins first.
Grid and flex children. A flex or grid item does not shrink below its content by default. Add min-width: 0 to the item, and use minmax(0, 1fr) instead of 1fr in grid columns.
Off-canvas menus. A hidden side menu positioned with right: -300px still widens the page. Hide it with transform and visibility, or make sure its container clips it.
Third-party widgets. Ads, chat bubbles and embedded posts with fixed widths. Wrap them in a container with max-width: 100%; overflow: hidden.
Check every width, not one
A page can be fine at 375 and break at 320 or at 414, or between breakpoints at tablet widths. Drag the device toolbar from 320 up to 1024 pixels and watch for a horizontal scrollbar. Then check with longer content: the longest product name, a translated menu, a missing image.
How to check that it is fixed
document.documentElement.scrollWidthequalsdocument.documentElement.clientWidthat every width you test (run it in the Console).- You cannot drag the page sideways on a real phone.
What SignalCrawler checks here
The audit measures every sampled page at ten widths from 320 pixels up and reports the elements that run off the screen at each width, with a screenshot that outlines them and the element's selector, so you know where to look in the CSS. It also stretches pages with longer text and long words to find layouts that are about to break.