CODEWITHSUNDEEP
htmlcsswordpressmobileresponsive-design
Patrick
Patrick

Reputation: 820

Why is our website allowing horizontal scrolling on mobile screens?

I've been at this for 3 hours now and can not for the life of me find out why or what is causing our page (at a mobile width) to be scrolled horizontally.

I recorded a video of my issue. I have been in dev tools for hours and am about to pull my hair out.

VIDEO

Any thoughts? Its a word press site.

You may also test for yourself on the actual Website.

Thank you kindly!

Upvotes: 1

Views: 1450

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371261

Focus your attention on this image buried deep in your #bottom-footer.

In mobile view, when I deleted the image, the horizontal scroll disappeared.

enter image description here

You've got the image relatively positioned and with a left: -140px. 

@media screen and (max-width: 550px)
.cc-reference {
    float: none;
    margin-left: 50%;
    left: -140px;
    position: relative;
    margin-top: -8px;
}

Unlike absolutely positioned elements, relatively positioned elements keep their original space (i.e., they are not removed from the document flow). Hence, you're adding 140px width to the image element, causing a horizontal scroll.

I've seen this before and wrote a more detailed answer (with an illustration of the behavior) here:

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18649

Spent a few minutes deleting elements in Chrome Dev Tools until I found the one that was causing a horizontal scroll on mobile: it's the image with credit card logos in the footer (.cc-reference). It's being positioned with margin-left: 50%; and left: -140px, which is a little hacky and created extra space due to relative positioning pushing over the 50% of space.

Update the styles like so to fix it.

Before:

@media screen and (max-width: 550px)
    .cc-reference {
        float: none;
        margin-left: 50%;
        left: -140px;
        position: relative;
        margin-top: -8px;
    }
}

Change to:

@media screen and (max-width: 550px)
    .cc-reference {
        float: none;
        display: block; /* making it block level allows you to... */
        margin: -8px auto 0; /* center automatically */
    }
}

Upvotes: 2

Related Questions