Disabling double vertical scrollbar and horizontal scrolling?

Question

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

Answer 1

Ok I've managed to find a solution to this 😊

It was to remove all previous overflow elements and replace it with this:

@media (max-width:480px) {#page {overflow-x:hidden}}

I now have no double vertical scrollbars and no horizontal scrolling on mobile devices – result!

Hopefully leaving this post here will help someone else some day 😊

David