Give help. Get help.

  • # February 15, 2013 at 12:18 pm


    I recently created a new site using Twitter Bootstrap:

    I just now noticed that I’m getting a little overflow to the right when I shrink my browser down to phone width. It’s only about 10px, but still noticeable.

    I’ve tried adding html {overflow-x: hidden;} but that doesn’t seem to solve the issue. Any recommendations would be greatly appreciated.

    I’m using Google Chrome.

    # February 15, 2013 at 12:27 pm

    Ah, I’m on to something. It has to do with my pseudo elements having 100% width. Need to figure out how to have full width, but not force overflow.

    # February 15, 2013 at 12:28 pm

    Dunno if this the answer but I would look into changing the padding on .showcase to margin instead in your media query(ies).

    You may have to add padding back on an internal element (.container?)

    # February 15, 2013 at 12:34 pm

    @ChrisP already tried overflow-x: hidden for both html, and body. Doesn’t seem to work for me.

    The issue is with my pseudo elements .bottom::before and .bottom::after. They both have 100% widths and I think that’s what’s causing it. Because as soon as I disable the two elements I no longer have an overflow problem. Strange.

    # February 15, 2013 at 12:49 pm

    @ChrisP Hmmm, Yeah I added html {overflow-x: hidden;} body{overflow-x: hidden;}

    However, it’s still showing me overflow in Chrome:

    I’ve even cleared cache and cookies and restarted my browser. Works fine in all the other browsers. Maybe it’s a chrome thing?

    # February 15, 2013 at 12:53 pm

    Same here. Even if I manually remove overflow: hidden from both body and html, I don’t have any horizontal scrollbar.

    # February 15, 2013 at 12:55 pm

    Hmm, well thanks guys. I’ll just take your word for it. Maybe I need to update something on my browser? Who knows.

    # February 15, 2013 at 1:13 pm

    After looking at this more in depth. It’s actually the following that’s causing the issue:

    custom.css:48@media (max-width: 767px)
    .bottom, .maincontent, .single-page, .pagecontent, .showcase {
    padding-right: 15px;
    padding-left: 15px;

    As soon as I remove this padding, the overflow disappears. Going to have to figure out a workaround.

    Edit: Pardon, it’s a combination between the pseudo elements and the padding at media width. So strange.

    # February 15, 2013 at 1:29 pm

    @JoshBlackwood Sure enough! That did the trick; man I love this forum. Thanks for all the help guys. Really appreciate it.

    # February 15, 2013 at 7:01 pm

    Glad to see this is solved but wanted to add that I really like the overall design. Very nice!

    # February 15, 2013 at 7:17 pm

    @JasonR, Thank you good sir!

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

You must be logged in to reply to this topic.