Slight overflow problem

[nickwinters]

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.

[nickwinters]

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.

[Paulie_D]

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]

@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]

@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?

[Kitty Giraudel]

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

[nickwinters]

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

[nickwinters]

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.

[nickwinters]

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

[JasonR]

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

[nickwinters]

@JasonR, Thank you good sir!

[Author]

Posts