Low to criticalMobileMeasured

Page scrolls sideways on mobile

Something on the page is wider than a phone screen, so the page drifts sideways and looks broken.

Checked on: every page the audit scans · Zolvio’s check: “Horizontal scrolling detected”

Why it costs you sales

When a page is wider than the screen it drifts sideways as shoppers scroll, content gets cut off at the edge, and the store feels broken. Shoppers notice it straight away.

The cause is usually one element: a wide table (size charts are a common one), an embedded video or iframe, an image with a fixed width, or a section set to 100vw plus padding.

How Zolvio detects it

Zolvio opens each page in a real browser at 375 pixels wide, the width of a typical phone, and compares how wide the page is with how wide the screen is. If the page is more than 5 pixels wider, it’s flagged, and the finding names the elements that reach furthest past the edge (up to five). Elements inside fixed menus and drawers, or inside boxes that clip their own overflow, are passed over because they don’t widen the page; if nothing else is found, the finding names the elements that reach the page’s right edge, so it still says where to look.

The audit also scrolls the page to its right edge to see how far a shopper can really move it sideways, and a page whose layout stops sideways scrolling isn’t flagged. Because the audit’s browser leaves out apps’ stylesheets and the store’s web fonts, a page that overflows is loaded again with them, and it’s flagged only if it still overflows.

Severity. Depends on how far the page overflows, and where. 15 pixels or less is low. On the homepage, collection pages, product pages and the cart, up to 30 pixels is medium, more than 30 is high and more than 100 is critical. On other pages, such as policies and blog posts, more than 30 pixels is medium and less is low.

This is a direct measurement, so it’s reported on every plan, including Free and audits with AI turned off. With AI review on, the AI agent also checks it against the audit’s evidence before it reaches your issue list.

AI screenshot review also looks for this problem (“Content wider than the phone screen”) in desktop and mobile screenshots. When both find it, you get one issue.

How to fix it

  1. Open the finding and note the element it names: that’s the one reaching past the screen edge.
  2. Constrain it in your theme’s CSS: max-width: 100% for images, videos and iframes, and overflow-x: auto on a wrapper around wide tables such as size charts, so the table scrolls inside its box instead of the page.
  3. Replace fixed pixel widths on containers with max-width: 100% or relative units, and avoid width: 100vw combined with padding.
  4. Fix the element itself rather than only hiding overflow on the whole page, which can cut content off. Then check the page again at phone width.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Page scrolls sideways on mobile” cost a Shopify store sales?

When a page is wider than the screen it drifts sideways as shoppers scroll, content gets cut off at the edge, and the store feels broken. Shoppers notice it straight away. The cause is usually one element: a wide table (size charts are a common one), an embedded video or iframe, an image with a fixed width, or a section set to 100vw plus padding.

How does Zolvio detect “Page scrolls sideways on mobile”?

Zolvio opens each page in a real browser at 375 pixels wide, the width of a typical phone, and compares how wide the page is with how wide the screen is. If the page is more than 5 pixels wider, it’s flagged, and the finding names the elements that reach furthest past the edge (up to five). Elements inside fixed menus and drawers, or inside boxes that clip their own overflow, are passed over because they don’t widen the page; if nothing else is found, the finding names the elements that reach the page’s right edge, so it still says where to look. The audit also scrolls the page to its right edge to see how far a shopper can really move it sideways, and a page whose layout stops sideways scrolling isn’t flagged. Because the audit’s browser leaves out apps’ stylesheets and the store’s web fonts, a page that overflows is loaded again with them, and it’s flagged only if it still overflows.

How do I fix “Page scrolls sideways on mobile” on Shopify?

Open the finding and note the element it names: that’s the one reaching past the screen edge. Constrain it in your theme’s CSS: max-width: 100% for images, videos and iframes, and overflow-x: auto on a wrapper around wide tables such as size charts, so the table scrolls inside its box instead of the page. Replace fixed pixel widths on containers with max-width: 100% or relative units, and avoid width: 100vw combined with padding. Fix the element itself rather than only hiding overflow on the whole page, which can cut content off. Then check the page again at phone width.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Heatmaps — See where shoppers tap and how far they scroll, on mobile and desktop.