Grow your CSS skills. Land your dream job.

Slight overflow problem

  • # February 15, 2013 at 12:18 pm

    Hello,

    I recently created a new site using Twitter Bootstrap: http://pixeltopress.com

    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:30 pm

    @nickwinters, although I can’t figure out what’s _causing_ it, you can fix it by adding the `overflow-x: hidden` to both html, and body tags

    # 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:37 pm

    @nickwinters, I looked, and noticed the pseudo elements _look_ like they overflow the document, since they’re 100% width I don’t see why it would..

    Adding overflow-x:hidden on both html and body worked on both firefox’s inspector and chrome developer tools for me.

    **Edit**: whatever you did, looks like it’s working now.

    # 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: http://cl.ly/image/0x1g0w3L2C3l

    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:52 pm

    That’s odd, I’m not seeing it in my Chrome:

    http://s11.postimage.org/8xd580d7n/Untitled.png

    Win 7, Chrome v24

    # 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:

    media=”screen”
    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:26 pm

    I’m seeing the same issue in Chrome, and I’m pretty sure I figured it out.

    Because you’ve set positioning on your pseudo elements, their container needs positioning set in order for the child pseudo elements to obey overflow: hidden;. If you set position: relative; on the body tag, your overflow disappears.

    # 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 1:31 pm

    Glad to help.

    # 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!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".