Bootstrap @media and changing css on screensize

Question

I've looked at bootstraps information on how to change css however I'm still confused.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

My website will load in with a 20% padding on the left and right, however when it goes to tablets I would like it to reduce to 10% and then mobile 2% (for a little on the side still)

my padding basically leaves empty spaces on the side of the page, any help appreciated.

My css is currently this and this is what I understood from what I read, thanks!

@media (min-width: @screen-sm-min) {
  .content {
    padding-left: 20%;
    padding-right: 20%;
  }
}

Answer 1

as explained in your question, the queries in bootstrap go from the width and up because they we're built mobile first approach using min-width, so to achieve what you want, you have to something like this:

/* Extra Small devices (Phones, 768px and down) */
@media (max-width:768px) { /*screen-xs-max Less variable*/
  .content {
    padding-left: 2%;
    padding-right: 2%;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { /*screen-sm-min Less variable*/
  .content {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { /*screen-md-min Less variable*/
  .content {
    padding-left: 20%;
    padding-right: 20%;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { /*screen-lg-min Less variable*/

}