Skip to content

How to fix a page that scrolls sideways on mobile

Best practices1 min readFixes check responsive-overflow

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.

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

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.

How to fix it.
  1. Find the element named in the technical detail and give it max-width:100% instead of a fixed width.
  2. Wrap wide tables in a container with overflow-x:auto, so only the table scrolls.
  3. Let images and embeds shrink with max-width:100%; height:auto.

Filed under Technical SEO. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.