By Anonymous (not verified) on

Hello.

I have a responsive site with an issue: there is a 10px/20px gap on the right hand side of the site, but only appears when on a mobile device (iphone, ipad, android etc), but there is no issue when viewed on a desktop browser or in Chromes web developer extensions' Responsive layouts. A horizontal sidebar is added as a result and it seems like an overflow of content. Is this a CSS issue?

Im using Zen theme and have created a sub theme.

Any advice would be most appreciated.

⋅ Categories: Drupal 7.x

Comments

ptocheia’s picture

ptocheia commented

My guess is that you've got an element on your page that's a bit too wide, which is creating that gap. Could be as simple as one element set to 100%, with padding. So, it's just a matter of figuring out what element is causing the layout to break. You can go into your stylesheet and add "display: none;" to the different containers on your page, to slowly hide elements. Do this one at a time, and refresh your device as you go - eventually you can narrow down the container holding the element that's breaking the layout, and from there selectively hide elements within the container until you've found the problem element. Rather frustrating that this isn't a problem for you when using Chrome's extensions for this - that would make the process much simpler!

Anonymous’s picture

Anonymous (not verified) commented

Hi ptocheia,

Thanks very much for your reply, i did indeed have a container with 100% width, plus padding! I didnt consider that, i just set 100% and seemingly forgot about the padding. Going through each container, hiding them, saving, then testing across devices and seeing the results helped me narrow down the problem. Great advice, thanks again.

ptocheia’s picture

ptocheia commented

Awesome, glad you got it fixed!

johnheaven’s picture

johnheaven commented

I've had this problem a couple of times before - so if only for my own future reference: check that images with border, padding etc. aren't increasing the width. I set box-sizing on all of my images to border-box in my CSS, i.e.:

img { box-sizing: border-box; }