Product Page is shifting off the page on mobile when swiping

Store Design

Topic summary

A Shopify store is experiencing a mobile layout issue where product pages shift horizontally off-screen when users swipe.

Affected Pages:

  • Organic sport energy drinks
  • Organic sports drinks
  • Organic hydration mix

Proposed Solutions:
Two support teams (PageFly-Victor and GemPages) independently suggested nearly identical CSS fixes:

  • Add overflow-x: hidden !important to html/body elements
  • Target mobile devices only using @media screen and (max-width: 767px)
  • Insert code in theme.liquid file

Key Difference:
PageFly recommended placing the code before the closing </body> tag, while GemPages suggested placing it after </body>. The store owner questioned this discrepancy and confirmed the issue only affects mobile devices.

The discussion remains open as the effectiveness of either placement hasn’t been confirmed.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Our product pages on Shopify are swiping off the page on mobile.

https://www.drinknooma.com/products/organic-sport-energy-drinks

https://www.drinknooma.com/products/organic-sports-drinks

https://www.drinknooma.com/products/organic-hydration-mix

https://www.drinknooma.com/products/organic-recovery-sodas

2

HI @mattNOOMA

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyVictor_0-1671842155154.png
PageFlyVictor_0-1671842155154.png1365×651 47.6 KB

@media screen and (max-width: 767px){ html, body { overflow-x: hidden! important; } }

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Hello @mattNOOMA

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

4

Thank you! Is there a difference between what was posted above?

@media screen and (max-width: 767px){ html, body { overflow-x: hidden! important; } }

AND

body{ overflow-x: hidden; }

Our issue is mobile only.

You also said to post the code BEFORE /body, while the first poster said to post it AFTER /body.

Thank you!

Thank you!