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

Research “CSS media queries”. – CBroe Aug 21 '14 at 06:38 — CBroe, Aug 21 '14 at 06:38

score 14 · Accepted Answer · edited May 23 '17 at 12:34

14

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

edited May 23 '17 at 12:34

Community

answered Aug 21 '14 at 06:43

4dgaurav

score 2 · Answer 2 · answered Aug 21 '14 at 06:42

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;
   }
 }

2 Answers2