QAlaunch

Shopify mobile site moves left and right: how to stop it

A Shopify store that slides sideways on a phone has at least one element wider than the screen: a section with a fixed pixel width, a wide image or embed, a negative margin, a carousel parked off-screen, or a block sized with 100vw inside a padded container. Find that element and fix its width instead of hiding the overflow. Adding overflow-x: hidden to the page is a last resort because it can break sticky headers and does not always stop panning in iOS Safari.

Opens your site in a real browser on desktop and phone. Free, about two minutes, no signup. Full report from $19.

What you'll see

On a phone the page jiggles when you scroll, or you can drag it left to reveal a strip of white on the right edge. Text can look slightly off-centre, and a sticky header may slide with the page. It is usually fine on desktop and in the theme editor’s mobile preview, which is why it is often reported by customers first.

Why it happens

1. One element is wider than the viewport

A section given a fixed width in custom CSS, a wide table or video embed, a negative margin used to make something full-bleed, or width: 100vw inside a container with padding will all push the page wider than a phone screen.

2. Carousels and animations sit outside the screen

Sliders, logo marquees and slide-in animations often park items just off to the right until they move into view. Without a parent that clips them, those hidden items still widen the page.

3. An app injects a fixed-width block

Review widgets, announcement bars, chat bubbles and upsell banners add their own markup. One built with a fixed desktop width can overflow on small screens even though your theme is responsive.

How to fix it

  1. Open the page in Chrome DevTools device mode at 375px wide and drag sideways to see which section sticks out. Do this for the home page, a collection, a product and the cart, since the cause may only appear on one template.
  2. In the Console, paste [...document.querySelectorAll("*")].filter(e => e.getBoundingClientRect().right > document.documentElement.clientWidth) and press Enter. It lists every element that extends past the right edge; the outermost one is usually the cause.
  3. Fix that element directly: remove the fixed width, give images and embeds max-width set to 100 percent, take out negative margins, and replace 100vw with a width based on the container.
  4. If an app widget is the culprit, turn off its embed under Online Store > Themes > Customize > App embeds to confirm, then ask the developer for a mobile fix or adjust its settings.
  5. For sliders, make sure the slider’s wrapper clips its contents. Most themes do this already; custom sliders pasted into a Custom Liquid section often do not.
  6. Only if nothing else works, add overflow-x: hidden. Forum reports show it may need to be on both html and body, and it stops position: sticky working for anything inside it.
  7. Check the result on a real iPhone, because iOS Safari can still allow sideways panning when only the body element is clipped.

How to check it's fixed

  • At widths between 360px and 414px, swipe sideways on the home, collection, product and cart pages; the page should not move horizontally at all.
  • Run the Console snippet again on each template and confirm it returns an empty list.
  • Scroll down a long page on a phone and check that the header still sticks if your theme uses a sticky header.

What a QAlaunch scan shows for this

  • Horizontal scrolling or overflow at phone width, spotted from the 390px screenshot and visual review.
  • Elements that overlap, are cut off or sit partly off-screen on mobile.
  • The free scan covers the homepage only; if the overflow is on product or collection templates, those pages need to be in a paid report to be checked.

See exactly what a full report contains in the sample report.

Frequently asked questions

Why does it look fine in the Shopify mobile preview?

The editor preview is a resized frame inside your desktop browser, not a phone. It does not reproduce touch panning or Safari’s handling of overflow, so a real device or DevTools device mode is a better test.

Is overflow-x: hidden on the body a bad fix?

It hides the symptom rather than the cause, and it can break sticky headers and some drawer menus. It is acceptable as a stopgap while you track down the wide element, not as the permanent answer.

Does sideways scrolling hurt sales or SEO?

It makes the store feel broken on the device most shoppers use, and it can make buttons harder to tap. Google evaluates the mobile version of pages, so content that does not fit the screen is worth fixing for both reasons.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the Shopify-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days
  • Up to 10 key pages tested by hand, not a scan
  • Every flow a customer uses: forms, sign-up, checkout, booking
  • Real mobile and desktop browsers
  • A written report in plain language, with screenshots
  • A 15-minute call to walk you through it
  • 10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

Related fixes

More for Shopify: all Shopify fixes · Shopify testing · Shopify mobile checkout bugs

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: Shopify Community: horizontal scroll issue on mobile · Shopify Community: website moving left to right on mobile · Shopify Community: mobile store keeps moving left and right