CODEWITHSUNDEEP
htmlcssflexboxoverflow
DavSev
DavSev

Reputation: 1111

Css, unwanted Horizontal scroll on mobile

I came across a small problem, for some reason I see a huge white gap in the left of the <html> tag

I tried to add the HTML and body tag this rules:

overflow-x: hidden; max-width: 100vw;

It works on desktop view (even if I resize the browser window) but it didn't help in mobile (it didn't help in mobile view in chrome dev tools).

What can be the problem? I think it has something to do with it that the site css is mainly using flexbox.

as well I suspect it has something to do with the div marked in red in the picture (which is position fixed but for some reason appears after scrolling down).

This is that div css rule

.contact-mobile{
    position: fixed !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 100vw;
    background-color: $black;
    opacity: 0.9;

    a{
        min-width: 25%;
        text-align: center;
        padding: 5px;
        i{
            color: #fff;
        }
        &:hover{
            opacity: 1;
            i{
                color: $black;
            }
            background-color: $green;

        }
    }
}

this is the dev site http://davdev.co.il/broker this is a zoom out of what I see https://www.screencast.com/t/P7zQwdWySBv

enter image description here

Upvotes: 1

Views: 821

Answers (1)

AlexDemzz
AlexDemzz

Reputation: 243

The problem come from your iframe position,

Put top: -5000px instead of left: -5000px, and it will fix the gap on mobile

Upvotes: 1

Related Questions