Menu
I am having an issue with my responsive stylesheet with Twitter Bootstrap. The site shows up fine with no issues but for whatever reason the responsive tablet and phone have this huge white gap to the right of the page. Its not the scroll bar issue its a huge white gap
http://i.imgur.com/JeRRRqq.png
I dont believe I have changed to much at all here. Nothing with width or anything. Inspected the objects in Chrome and couldnt see anything overflowing over width wise
850
I've done plenty of digging but the only answer I can find is that this happens when you haven't wrapped all of your . row classes in a . container or .
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.
At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.
This might be a little late but I found the other answers to be misleading.
It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.
from http://getbootstrap.com/css/ :
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.
104
Have you tried:
html, body { overflow-x: hidden; } Can you post a fiddle?
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With