Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 232
Torben Avatar asked Sep 17 '14 10:09

Torben


People also ask

How do I set margin-right in bootstrap?

l - sets margin-left or padding-left. r - sets margin-right or padding-right. x - sets both padding-left and padding-right or margin-left and margin-right. y - sets both padding-top and padding-bottom or margin-top and margin-bottom.

How do I set the margins on the right side?

The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of margin-right property is zero.

Which class will you use to set margin auto to the right side in bootstrap 5?

l - for classes that set margin-left or padding-left. r - for classes that set margin-right or padding-right.


2 Answers

I figured it out:

html, body {
  overflow-x: hidden;
}

Solved it for me!

like image 83
Torben Avatar answered Oct 07 '22 23:10

Torben


.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.

like image 20
bea Avatar answered Oct 08 '22 01:10

bea