My website cannot scroll up or down smoothly after hidden overflow

Site URL: http://www.moonlitdesign.uk

so i'm having this on going issue where i can't use html, body {overflow-x: hidden;} on the whole site as it is breaking the scroll on mobile. I know this isn't good practice either.

so i thought i could try and localise the code to just the images instead but its not taking affect at all. can anyone see the problem here?

 .sqs-block-image .image-block-outer-wrapper .image-block-wrapper {
    position: relative;
    overflow-x: hidden;
}

I'm in 7.1! 

i need to hide the overflow on mobile as it is ruining the experience! 

I'm having the same problem! There is random white space down the side of my site but:

html, body {overflow-x:hidden;} 

breaks scrolling. 

https://kanga-suit.squarespace.com/

PW: KangarooCare

😞 

Please help! 

On 10/20/2022 at 10:41 PM, sarahhalliday said:

I'm having the same problem! There is random white space down the side of my site but:

html, body {overflow-x:hidden;} 

breaks scrolling. 

 

https://kanga-suit.squarespace.com/

PW: KangarooCare

 

😞 

Please help! 

Use this new code

body {
    overflow-x: hidden;
}

@tuanphan Yeessss! That worked! Thank you Tuanphan, you are a genius!

Best,

Sarah 

Just in case anyone else gets here with the same problemI think I found a fix that doesn't break things.
 

Instead of:

overflow-x: hidden;

Try this:

overflow-x: clip;

It sounds so simple and like it shouldn't be that much different, but for some reason `overflow-x: hidden` broke my layout after working for years (Brine Template). It seems to be making scroll behavior sticky, but setting overflow-x to "clip" seems to solve this.

Just to throw in some more background on this in case it's useful to anyone with the same issue.

I had a problem with my client's site's header menu. It would disappear on some browsers and cover the top of the overlay menu with a white bar on others, plus general juddering and scrolling issues. All on mobile.

After painstakingly removing hundreds of lines of code line-by-line, it did indeed turn out to be the line: html, body {overflow-x:hidden;} 

and as @tuanphan suggested, changing it to body {overflow-x:hidden;}  was the fix.

I'd really like to understand from any of the experts on here why that code no longer works? I must have had it in use for three years+ with no issue before (I don't even know why it was there but clearly I had some horizontal overflow at some point that necessitated adding that!).