Bootstrap: Row margins seen on smaller devices

Question

My portfolio website uses rows to display full-width images. These look fine on my desktop and ipad but once viewed on a phone there seems to be margins on the left and right.

Here's the code:

<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-xs-12">
               <img src="img/focus.jpg" class="img-responsive" alt="Focus Ireland"></a>
            </div>
        </div>   
     </div> 
</section>

The site is live at http://www.burnser.com/index.html

Any help would be most grateful. Thanks in advance.

Possible duplicate of [Bootstrap - Removing padding or margin when screen size is smaller](http://stackoverflow.com/questions/16410659/bootstrap-removing-padding-or-margin-when-screen-size-is-smaller) — BENARD Patrick, Jan 18 '17 at 15:20

score 0 · Answer 1 · answered Jan 18 '17 at 15:23

0

the col-xs-12 class from Bootstrap has a padding.

padding-right: 15px;
padding-left: 15px;

That padding is set to 0 in screens bigger than 768px.

So if you want to remove the padding, you could override those properties in your css file.

answered Jan 18 '17 at 15:23

Manu Obre

2,254
1
12
12

score 0 · Answer 2 · answered Jan 18 '17 at 15:28

0

Need to change

.col-xs-12{
    padding-right: 15px;
    padding-left: 15px;
}

to

.col-xs-12{
        padding-right: 0;
        padding-left: 0;
    }

Currently it's only set for min-width: 768px

@media (min-width: 768px)
.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

answered Jan 18 '17 at 15:28

Gokul P P

962
8
27

@Brain i am Just asking that, do you notice that your some text become little messi after doing that like see `About` Content in small screen – Klaus Mikaelson Jan 18 '17 at 15:46
Yeah I just noticed that now He need to create separate `class` for image – Gokul P P Jan 18 '17 at 16:06

Bootstrap: Row margins seen on smaller devices

2 Answers2