Bootstrap 2.3 CSS Responsive left with a white space on the right

Question

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

Atahualpa

I've encountered the same problem, it had something to do with the navbar. – Endoergic

Answer 1

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.

Atahualpa

for other's references: you don't neccesarily need to add !important if you do not override this anywhere else. – Pro

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 :/ – Curriculum

I think it only applies to you because the gap on my page is gone! – Emblazonry

This creates issues with links referencing segments inside the page. It seems like they stop functioning when you add these rules. – Kaleb

Answer 2

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!

Madonna

She is right. This is much better solution than the one that is accepted and have million upvotes. – Telephonic

Answer 3

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;}
}

Orthopedic

If you're using bootstrap 3.x, then no... this is the wrong solution... one of your containers isn't really "contained". – Abduction

Answer 4

Replace .container class with .container-fluid in body and in your .css file make the padding right and left : 0px; That's it.

Uuge

Answer 5

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">`

Chromoprotein

That seemed to make things worse while resizing and no change in the end result – Atahualpa

I think I saw navbar-inner's margin-left, margin-right set to -20px, then they disappeared – Chromoprotein

actually the screen is still movable to the side on a mobile device. so now we have 2 issues instead of one – Atahualpa

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) – Atahualpa

It still slightly scrolls to the left on the iPhone (at least on the iPhone 5) – Atahualpa

Answer 6

I solved this by simply wrapping the .row in another .container-fluid class element. This should take care of the margin.

Johns

This was for bootstrap 2.x, you're referring to bootstrap 3.x which out of the box works a lot better – Atahualpa