Bootstrap - Some kind of margin on mobile devices (only right side)

Question

i created a mobile page with bootstrap, but for some kind the mobile page has a margin or padding on mobile devices on the right side where i can slide to. I deleted some code, but even the most simple structure has it:

    <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="navigation"></div>
          </div>
        </div>
    </div><!--container-->

.container {
  max-width:100%;
  padding:0;
  height: 100%;
  width:100%;
}

.navigation {
  height:3.4375em;
  line-height:1em;
  background-color:#E75200;
}

I uploaded the test page here: http://wp1011618.server-he.de/projekte/test/index2.html

I have the feeling that it is because of the col-lg-12 padding, but Bootstrap this can't be Bootstraps intention so I am wondering whats wrong here?

Thanks!

score 50 · Accepted Answer · answered Sep 17 '14 at 11:55

50

I figured it out:

html, body {
  overflow-x: hidden;
}

Solved it for me!

answered Sep 17 '14 at 11:55

Torben

5,388
12
46
78

3

Do you know why this happens? I had the same issue (only on mobile) and this fix worked. I can't help but wonder why, it wasn't occurring before. – SamuelN Oct 07 '15 at 18:16
Thank you so much ! – tcacciatore Feb 22 '17 at 21:47
Ditto all the other comments. Never seen this issue before on mobile sites then suddenly had issue on site I was updating. Thanks anyway. – Stephen Simpson Apr 18 '17 at 09:08
you made my day – Matteo Errera Aug 16 '17 at 08:27
1

Just a warning when using this, if you have any elements using `position: sticky`, it will stop working. See this: https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky – martin36 Feb 26 '19 at 23:08

score 7 · Answer 2 · answered Sep 17 '14 at 10:35

7

.col-lg-12 class has padding-right: 15px; and padding-left: 15px;, that causes white spaces. Make them 0, than remove margin-right: -15px; and margin-left: -15px; in .row class.

answered Sep 17 '14 at 10:35

bea

173
5

score 0 · Answer 3 · answered Sep 17 '14 at 10:27

0

If you want to set the right-padding on your example header, then just do that style in .container for example: Padding-Right:12px.

answered Sep 17 '14 at 10:27

Al Kush

278
3
15

score 0 · Answer 4 · answered Sep 17 '14 at 10:38

0

Do you know you don't have bootstrap.min.js file in your js directory? Anyway, the solution is just don't use "col-lg-12" div, "row" will fill 100% of width so why you want this one?

answered Sep 17 '14 at 10:38

Joint

1,218
1
12
18

1

Because it is the proper way to use the grid layout in bootstrap? In the original page there is 2-column content, so it makes sende to use .col-lg-6 two times then. – Torben Sep 17 '14 at 10:39
so then you write two .col-lg-6 elements inside .row. Element .col-lg-12 and other have padding to be usefull for content, not for all page container which should fill 100% browser width. Changing paddings and margins inside bootstrap css is not good idea... See this examples: http://getbootstrap.com/css/#grid there is no .col-lg-12 div to hold columns, they put their just inside .row – Joint Sep 17 '14 at 10:47
I am not sure if he try to change the style inside the bootstrap css, he just tried to added inline style to the box. – Al Kush Sep 17 '14 at 11:01
I do not change anything in the bootstrap.css files. But my page is e.g 80% and margin:0 auto; when used on desktops. but it should be 100% without any space on the right side on mobiles. – Torben Sep 17 '14 at 11:34
If so try to add margin 0 to the container, it may fix it, auto just centered the box with default margin. – Al Kush Sep 19 '14 at 10:35

Bootstrap - Some kind of margin on mobile devices (only right side)

4 Answers4

Linked