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.
@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.
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.
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.
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.
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?)
@nickwinters, although I can't figure out what's causing it, you can fix it by adding the
overflow-x: hiddento both html, and body tags@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.
@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.
@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?
That's odd, I'm not seeing it in my Chrome:
http://s11.postimage.org/8xd580d7n/Untitled.png
Win 7, Chrome v24
Same here. Even if I manually remove
overflow: hiddenfrom both body and html, I don't have any horizontal scrollbar.Hmm, well thanks guys. I'll just take your word for it. Maybe I need to update something on my browser? Who knows.
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.
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 setposition: relative;on the body tag, your overflow disappears.@JoshBlackwood Sure enough! That did the trick; man I love this forum. Thanks for all the help guys. Really appreciate it.
Glad to help.
Glad to see this is solved but wanted to add that I really like the overall design. Very nice!
@JasonR, Thank you good sir!