Your page slides sideways on phones

Applies to

every page

Typical severity

high

Effect on conversions

medium

Effort to fix

Quick to fix

What to look for

Document wider than a 390px viewport.

Why it matters

When a page is wider than the phone screen, it wobbles sideways as people scroll. Some content sits off the edge where nobody sees it. The page feels unfinished, and people trust it less.

It is a common problem because a single element is enough to cause it. One wide image, table, embedded video or fixed-width section can push the whole page wider than the screen.

What good looks like

We load the page at a 390px wide phone viewport and compare the width of the whole document to the width of the screen. The page passes if the document is no more than 8px wider than the screen. Anything wider means content spills off the side.

How to check it yourself

1. Open the page in Chrome, open developer tools (F12) and switch on the device toolbar. Set the width to 390.
2. Scroll down the page and try to scroll sideways. If the page moves left and right, something is too wide.
3. To find the culprit, open the Console tab and paste the snippet below. It lists elements wider than the screen.
4. Check on a real phone too, especially pages with tables, embedded maps or videos.

How to fix it

• Find the widest element first. Often it's an image, table, iframe or a section with a fixed width in pixels.
• Give images and embeds max-width: 100% so they shrink to fit.
• Wrap wide tables in a container that scrolls on its own, so only the table scrolls, not the whole page.
• Replace fixed widths with max-width, and avoid width: 100vw, which ignores the scrollbar and can overshoot.
• Check for negative margins and absolutely positioned decorations that hang off the edge.

/* Find what's too wide: paste into the browser console */
[...document.querySelectorAll("*")]
  .filter((el) => el.getBoundingClientRect().right > innerWidth)
  .forEach((el) => console.log(el));

/* Common fixes */
img, video, iframe { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; }
.section { max-width: 1200px; width: 100%; }

Common mistakes

• Hiding the problem with overflow-x: hidden on the body. It can break sticky headers and still leaves content cut off.
• Long unbroken text such as URLs or email addresses. Use overflow-wrap: anywhere on content areas.
• Testing only at one phone width. Check at 360px as well as 390px.

AgoraScan measures this automatically on every page it audits, on desktop and mobile.

Based on

• Google Search Central