How to stop website from moving left to right on mobile

Store Design
, , ,

Topic summary

A user is experiencing horizontal scrolling issues on their Shopify store’s mobile view, where the page shifts left to right during vertical scrolling. They want to lock the viewport to prevent horizontal movement.

Attempted Solutions:

  • Adding body { overflow-x: hidden !important; } to custom CSS
  • Adding html, body { overflow-x: hidden; position: relative; } to theme settings custom CSS

Current Status:
Both CSS solutions failed to resolve the issue. The problem persists, suggesting the horizontal overflow may be caused by specific elements exceeding the viewport width rather than a simple overflow setting. Further investigation into the theme’s HTML structure or specific page elements causing the width overflow is likely needed.

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

My website: https://slucostudio.co/

On mobile, the page would move from left to right if you don’t carefully scroll down. Which makes it annoying. How do I make it so it locks to one ratio and you can only move up and down, not left to right. Thank you very much!

2

Go to your online store → customize → settings → custom css
and pste this there

body {
    overflow-x: hidden !important;
}
3

Thanks Asad, it did not work unfortunately

4

Hi @Kidxin

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

html, body {
overflow-x: hidden; 
position: relative;
}
5

It did not work, sorry!