How to apply style only to particular screen type in bootstrap

Question

I have a general style definition as

.main-site-nav li a {
    padding-left: 0;
}

Now want to apply a different style only for .main-site-nav li a in extra small screens (xs) only as follows.

/* xs screens only */
.main-site-nav li a {
    padding-left: 15;
}

How can I do it?

Thanks

Solution 1

The selectors used in BS3 (v3.2.0), if you want to stay consistent:

@media(max-width:767px){
  .main-site-nav li a {
    padding-left: 15;
  }
}

This will take care of your xs screen

refer : Twitter Bootstrap 3: how to use media queries?

Solution 2

Use media queries like below. I have assumed your small screen resolution is 500px.

 @media all and (max-width: 500px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

You can also specify min-width and max-width like below.

 @media all and (max-width: 500px) and (min-width: 380px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

Read more about media queries here.