Horizontal Scroll Bar on Safari Mobile

Design help General
1

Hi!

I’m encountering an unwanted horizontal scroll bar on my website design, but only on Safari. Here are screenshots of what is it vs. what I’d like.

PNG
PNG1242×2208 551 KB
PNG
PNG1242×2208 521 KB

I found and ran this script to find the culprit:

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});

scriptymcscriptface
scriptymcscriptface1920×1080 359 KB
closerrrrr
closerrrrr1019×762 162 KB

It seems to be the video elements, specifically a certain “embedly-embed” element. I’ve already set my body element to overflow: hidden, so I’m not sure the best way to proceed to remove whatever’s overflowing and causing that scroll bar. Any ideas?

Thanks!

Here is my site‘s Read-Only: https://preview.webflow.com/preview/mosaic-annual-report-2018?utm_source=mosaic-annual-report-2018&preview=a5e6a096fd66093f3cdd5b9149034a04

Here‘s the live site:
https://www.mosaicchristian2018.com/

2

Hmm. Still haven’t found a solution. Has anyone else ever had this problem with the video embed or lightbox element?

3

Well, not completely sure if this was the best fix, but adding this resolved the side-scrolling issue:

html {
  overflow:hidden;
}

The only weird thing is that scrolling no longer works on desktop when I shrink the browser window for some reason. Any clue why?

Also, if anyone has a better solution, feel free to chime in! :smiley:

4

Hey @Peter_Broomfield

I can’t see that preview link anymore, but it’s almost certainly just because an element is being pushed out and you will need to add an overlay hidden on one of your sections/divs where that is happening.

5

Change overflow to ´overflow-x´

2 Likes
6

Hm… so this is the non-destructive way to add overflow: hidden to body and still retain scrollability! Why have I never thought of that!

7

This is great! Thanks so much!

8

mark as solution to close this topic. In general most of the times the H scroll is because you use somewhere fixed width or min-width (600px width for example for 500px width screen = 100px of scroll) - but yes - the easiest way to solve this is to remove the x scroller