1

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!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Patrick
  • 800
  • 3
  • 10
  • 36
  • Most likely caused by that thing at the bottom where it tells you "someone from xyz made a purchase" –  Dec 23 '16 at 03:18
  • nope thats been there for ages. This has only been a problem for 2 days – Patrick Dec 23 '16 at 03:23
  • I just messed up somewhere and not sure whats pushing it over or hidden in that space. Driving me nuts ahaa – Patrick Dec 23 '16 at 03:24

2 Answers2

2

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 */
    }
}
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Okay great leme look. Thanks! – Patrick Dec 23 '16 at 03:35
  • I just floated it to the left instead of none which solved the issue. Thank you soo much for finding the target problem! – Patrick Dec 23 '16 at 03:43
  • 1
    @PortalP The element should not be floating at all, considering it's on its own line. Your change fixed it due to a technicality, but wouldn't you rather be centering the element automatically instead of specifying hardcoded negative pixels? – Jon Uleis Dec 23 '16 at 03:44
  • 1
    Applied. Appreciate the extra tip. – Patrick Dec 23 '16 at 03:47
1

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Cool looking now and will get back to ya. Thanks! – Patrick Dec 23 '16 at 03:35
  • I just set it to float:left; donno why I was using none. Think that solved the issue. Awarded for detailed description and linking to similar issue. – Patrick Dec 23 '16 at 03:42
  • Oops my bad, I am going to award Jon because I ended up using his solution exactly and its less code. Thanks! – Patrick Dec 23 '16 at 03:47