Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Comments
My guess is that you've got
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!
Got it working
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.
Awesome, glad you got it
Awesome, glad you got it fixed!
Also check box-sizing
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; }