18

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

Andrew
  • 4,443
  • 5
  • 33
  • 75

6 Answers6

62

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.

Andrew
  • 4,443
  • 5
  • 33
  • 75
  • 1
    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 03:36
  • 2
    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 :/ – Kenmore Jan 02 '14 at 08:04
  • 2
    I think it only applies to you because the gap on my page is gone! – ILikeTacos Aug 07 '14 at 21:35
  • This creates issues with links referencing segments inside the page. It seems like they stop functioning when you add these rules. – Gofilord May 02 '15 at 08:34
  • 1
    You saved me from death. Thanks – Preethi Kumar Jun 08 '16 at 12:38
3

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!

Anna Wygant
  • 126
  • 4
  • 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
1

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;}
}
Ritesh A
  • 283
  • 1
  • 2
  • 12
  • 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
1

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

ann
  • 576
  • 1
  • 10
  • 19
Nilesh
  • 2,054
  • 3
  • 23
  • 43
0

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">`
user3274745
  • 361
  • 4
  • 18
patnav
  • 96
  • 1
  • 3
  • That seemed to make things worse while resizing and no change in the end result – Andrew Jun 09 '13 at 01:37
  • I think I saw navbar-inner's margin-left, margin-right set to -20px, then they disappeared – patnav Jun 09 '13 at 02: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 09 '13 at 02: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 09 '13 at 02:33
  • It still slightly scrolls to the left on the iPhone (at least on the iPhone 5) – Andrew Jun 09 '13 at 02:49
0

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

andromeda
  • 4,433
  • 5
  • 32
  • 42
  • This was for bootstrap 2.x, you're referring to bootstrap 3.x which out of the box works a lot better – Andrew Oct 01 '14 at 21:15