Css – Bootstrap – Removing padding or margin when screen size is smaller

cssmedia-queriesresponsive-designtwitter-bootstrap

EDITED:
Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this.

Original
I basically want to remove any default padding or margin set for responsiveness on smaller device screens.

I have a background color overridden on container-fluid selector and for larger screen they render perfectly 100% across the width but they the screen is reduced to smaller sizes,
by default, Bootstrap seems to add a margin or padding oncontainer-fluid or container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

If I use custom css to overwriting Bootstrap's default style, what media query or selector should I overwrite to for removing this padding on smaller screens?

Best Answer

The @media query specifically for 'phones' is..

@media (max-width: 480px) { ... }

But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.

Here are some queries that have worked (in most cases) for me:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Update for Bootstrap 4

Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints): https://stackoverflow.com/a/43208888/171456

Related Topic