css - Disabling double vertical scrollbar and horizontal scrolling?

I have a WordPress site here:

www.horizonimaging.co.uk

and at some unknown point a month or so ago double vertical scrollbars appeared on the site.

I was able to fix this (remove the second vertical scrollbar) by adding this code to the Additional CSS section for the whole site:

html, body {
        max-width: 100%;        
    overflow-y: visible;
}

However, I later noticed that the site can be scrolled very slightly horizontally on my iPhone and iPad (not on desktop browsers though).

The solution appeared to be adding:

overflow-x: hidden

to the same Additional CSS section.

However, it appears that if you're using 'visible' for one of the overflow values, then both have to be 'visible' ... you can't have one set to 'visible' and one set to 'hidden'.

This was the closest I got to an explanation of why this is the case:

At the moment I've prioritised not having the double vertical scrollbars as this is much more annoying than the slight horizontal scrolling ... but I'd ideally like to fix both problems.

Can anyone guide me on the steps I can take to fix both of these issues?

Thanks so much for your help!

David

I have a WordPress site here:

www.horizonimaging.co.uk

and at some unknown point a month or so ago double vertical scrollbars appeared on the site.

I was able to fix this (remove the second vertical scrollbar) by adding this code to the Additional CSS section for the whole site:

html, body {
        max-width: 100%;        
    overflow-y: visible;
}

However, I later noticed that the site can be scrolled very slightly horizontally on my iPhone and iPad (not on desktop browsers though).

The solution appeared to be adding:

overflow-x: hidden

to the same Additional CSS section.

However, it appears that if you're using 'visible' for one of the overflow values, then both have to be 'visible' ... you can't have one set to 'visible' and one set to 'hidden'.

This was the closest I got to an explanation of why this is the case:

https://teamtreehouse.com/community/overflow-y-not-visible-when-overflow-x-is-set-to-scroll

At the moment I've prioritised not having the double vertical scrollbars as this is much more annoying than the slight horizontal scrolling ... but I'd ideally like to fix both problems.

Can anyone guide me on the steps I can take to fix both of these issues?

Thanks so much for your help!

David

• css

Share Improve this question asked Mar 25, 2023 at 16:43 horizonimaginghorizonimaging 1 1

• I've just noticed if I remove the ‘overflow-y: visible’ code then nothing actually changes – the double scrollbar still doesn’t appear, although the horizontal scrolling is still there. But if I then add: overflow-x: hidden; Then the double vertical scrollbar appears and the horizontal scrolling problem disappears! I’ve now just left the ‘overflow-x: hidden’ code active on this staging site so you can see the problem: horizonimaging.flywheelstaging.com At my end I now have double vertical scrollbars but no horizontal scrolling on iOS. Thanks for your help! David – horizonimaging Commented Mar 26, 2023 at 10:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Ok I've managed to find a solution to this