I can't fix the Horizontal Scroll and the white space on the right side of my website on mobile.

Technical Q&A
1

So basically when you sort of scroll down, there is like this extra white space to the right side of my website and I can’t seem to fix it. Also, I covered everything in my website to not leak it.

Solution.png
Solution.png1080×1920 143 KB

2

Hey

Can you please provide a link to your site so that I can take a look!

3

www.puppydub.com

4

I am using the Shrine Pro Theme

5

I just realised that the space is on both sides of the website :disappointed_face: Please help me fix this

6

Thanks! I can’t see any issue on my device. Is there a specific page that seems to have the problem?

7

It is in any page, only on mobile, when you scroll and sort of force the website to move to the side, there is like a 1 cm thick whitespace on the sides

IMG_8823C6D4FA3C-1.jpeg
IMG_8823C6D4FA3C-1.jpeg1290×2796 253 KB

8

Are you on iPhone by any chance? It all seems to be working on my device (android)

9

Yes, I am on iPhone, and my brother also has one and he searched it and same thing. I tried this:

#MainContent{ overflow-x: hidden !important; }

It works on the product page. when. I add it to the base.css, but it also sort of freezes my other pages not allowing me to scroll

10

Great, it sounds like this might be an issue specific to iPhones. Unfortunately, I don’t have one myself, so I’m unable to troubleshoot further. However, for any other developers checking this, I can confirm that the site is working as expected on a Samsung Android!

11

Alright, thank you