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

[PAulCoulterF]

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.

[Olllie]

Hey

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

[PAulCoulterF]

www.puppydub.com

[Olllie]

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

[PAulCoulterF]

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

[Olllie]

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

[PAulCoulterF]

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

<style>        #MainContent{
overflow-x: hidden !important;
}
</style>

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

[Olllie]

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!

[PAulCoulterF]

Alright, thank you

[PAulCoulterF]

I am using the Shrine Pro Theme

[PAulCoulterF]

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