Bootstrap 2.3 CSS Responsive left with a white space on the right
Bootstrap 2.3 CSS Responsive left with a white space on the right
I'm creating a website (and I'm a noob at this). I'm working on the functionality portion of design and i'll have someone do graphics later.
Currently when it goes into responsive (mobile view) it leaves a 2px margin on the right that is movable on a mobile browser (and scrollable). I can't for the life of me get rid of that.
if I turn on overflow-x: hidden, then it does become non scrollable but still movable.
I want that extra space to go away. I don't see it defined as padding in any of the css.
Using Bootstrap 2.3
6 Answers
6
Solved by adding this to my custom css:
html, body {
width: auto !important;
overflow-x: hidden !important;
}
Note: the !important is only being used so it takes priority over other CSS. Most instances will not need !important if you load your custom CSS after your bootstrap CSS.
!important
for other's references: you don't neccesarily need to add
!important if you do not override this anywhere else.– IkegawaTaro
Sep 18 '13 at 3:36
!important
This makes the scroll bar disappear but, unless it's just me, if you click and drag a selection to the right you can see that the gap is still there. Doesn't seem like a real fix. I've always noticed that damn gap when using Bootstrap... don't think I've ever found a perfect solution :/
– Zuko
Jan 2 '14 at 8:04
I think it only applies to you because the gap on my page is gone!
– ILikeTacos
Aug 7 '14 at 21:35
A million thanks, this totally solved my problem
– aokelly
Oct 2 '14 at 15:43
You saved me from death. Thanks
– Preethi Kumar
Jun 8 '16 at 12:38
I know I'm super late to the game here but I figured out why this happens in the first place.
If you're using a navbar, there's some extra padding in the navbar-right element that shouldn't be there. It has a margin-right of 15px that causes this gap. Overwrite it and problem solved!
She is right. This is much better solution than the one that is accepted and have million upvotes.
– Goran
Oct 22 '15 at 14:10
Replace .container class with .container-fluid in body and in your .css file make the padding right and left : 0px;
That's it.
.container
.container-fluid
padding right and left : 0px;
Thanx ann for editing my post.
– Nilesh
May 4 '16 at 10:45
I have tried doing this, but it worked only on browser based mobile emulators. It also works nicely when I resize my browser.
But, when I check it on my phone - Samsung Galaxy S2 & iPhone 5, it still shows me the white space.
I also tried:
@media handheld and (max-width: 481px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}
@media handheld and (max-width: 380px) and (orientation: portrait) {
html,body{width:100%;overflow-x:hidden;}
}
If you're using bootstrap 3.x, then no... this is the wrong solution... one of your containers isn't really "contained".
– Xogle
May 14 '15 at 19:01
Remove margin-left, margin-right
And change
<div class="navbar">
<div class="navbar-inner navbar-fixed-top">
to
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">`
That seemed to make things worse while resizing and no change in the end result
– Andrew
Jun 9 '13 at 1:37
I think I saw navbar-inner's margin-left, margin-right set to -20px, then they disappeared
– patnav
Jun 9 '13 at 2:10
actually the screen is still movable to the side on a mobile device. so now we have 2 issues instead of one
– Andrew
Jun 9 '13 at 2:13
I've done some manual adjustments on the css and still have like a 2px white space on the right side. even though everything is declared a min of 385 (html, body, nav, etc)
– Andrew
Jun 9 '13 at 2:33
It's working perfectly on the iPhone for me.
– ralph.m
Jun 9 '13 at 2:44
I solved this by simply wrapping the .row in another .container-fluid class element. This should take care of the margin.
This was for bootstrap 2.x, you're referring to bootstrap 3.x which out of the box works a lot better
– Andrew
Oct 1 '14 at 21:15
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I've encountered the same problem, it had something to do with the navbar.
– Pier-Luc Gendreau
Jun 9 '13 at 1:24