Disabling double vertical scrollbar and horizontal scrolling?

  • Resolved horizonimaging

    (@horizonimaging)


    1 year, 8 months ago

    Hi there ??

    I have a WordPress site here:

    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

    • This topic was modified 1 year, 8 months ago by James Huff. Reason: redundant link removed
    • This topic was modified 1 year, 8 months ago by James Huff.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hello, when I disable your CSS in the Chrome Developer Tools, nothing happens. I can’t see a double vertical scroll bar.

    Thread Starter horizonimaging

    (@horizonimaging)

    Hi jidwictut9,

    Many thanks for your reply.

    Ah that’s interesting …

    So if I remove the ‘overflow-y: visible’ code then you’re right, 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 … but then 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:

    https://horizonimaging.flywheelstaging.com/

    At my end I now have double vertical scrollbars, but no horizontal scrolling on iOS.

    Thanks for your help!

    David

    Hello, on your staging page I now see the double bar on the right side. If I deactivate your CSS, the page looks normal to me. Unfortunately I can’t simulate IOS (except in Chrome).
    Astra already adds the following code by default:
    body { overflow-x: hidden;}
    But you still add this to html (html, body {….}), that’s probably why double bar appears! You have a scroll bar for the body and the html!

    • This reply was modified 1 year, 8 months ago by jidwictut9.
    • This reply was modified 1 year, 8 months ago by jidwictut9.
    Thread Starter horizonimaging

    (@horizonimaging)

    Hi jidwictut9,

    Thanks again for your quick reply ??

    So are you saying I need to implement the ‘overflow-x: hidden’ code differently? Are you able to write out how the code should look for me?

    Many thanks again! ??

    David

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

    I have no problems with the scroll bar on my site. I am therefore a little surprised.

    • This reply was modified 1 year, 8 months ago by jidwictut9.
    Thread Starter horizonimaging

    (@horizonimaging)

    Oh wow!! ?? I do believe that’s solved the problem! ??

    I will continue to have a poke around to make sure neither problem occur on either my laptop or iOS devices but it’s looking hopeful.

    Thank you so much!!

    David

    No problem. If you no longer have a problem, please mark this topic as solved ??

    Thread Starter horizonimaging

    (@horizonimaging)

    Sure, will do! I’ll take a closer look to make sure it’s definitely fixed when I’m back in the office next week.

    I’m not a coder, but if I’ve learned anything from modifying and tweaking this website (which a company built for me), it’s that sometimes one fix breaks something else, which you may not immediately notice! ??

    Thanks again!

    David ??

    Thread Starter horizonimaging

    (@horizonimaging)

    I do believe it’s fixed! Thanks so much again for your help! ????

    David

    Thread Starter horizonimaging

    (@horizonimaging)

    Oh no … it appears the horizontal scrolling problem is back again, but strangely only on browsers large than a mobile in portrait mode – on a mobile in portrait mode there is no horizontal scrolling or double vertical scrollbars.

    This would imply that just increasing the max-width value to a higher value such as 1200px (the maximum width of the bulk of the site) would fix the problem, but then the vertical scrollbars come back ??

    Do you have any other ideas I can try? I don’t know what changes I’ve made to the site that would have broken it sadly ??

    You can see the problem on the live site if you view it on a phone in landscape mode or on a tablet:

    https://www.horizonimaging.co.uk

    Many thanks,

    David

    Thread Starter horizonimaging

    (@horizonimaging)

    Ah the horizontal scrolling is now gone again after adding this bit of code to add some additional padding on the left and right of the main body of my site for tablet browsers only:

    @media (min-width: 740px) and (max-width: 1240px) {
    .ast-page-builder-template .site-content > .ast-container {
    padding: 0px 20px 0px 20px;
    }}

    This is an aesthetic tweak that I’ve been meaning to make for a while, and conveniently (and unexpectedly) it also solved the horizontal scrolling issue too!

    That was a relief! ??

    David

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Disabling double vertical scrollbar and horizontal scrolling?’ is closed to new replies.