CODEWITHSUNDEEP
csstwitter-bootstrapmedia-queries
user3187469
user3187469

Reputation: 1521

@media for 2 different resolutions

I have this line in CSS:

icons span{
width: 25px;
height: 25px;
margin-left: -3px;

and then

@media (min-width: 1200px){
.icons span{
  margin-left: 6px;
}

Now I would like to set margin-left:6px again for width 991px and under? How do I do that in this example?

Upvotes: 1

Views: 76

Answers (3)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

You could add more media to your css.
try to add this after your media

@media (max-width: 991px){
.os-icons span{
  margin-left: 6px;
}

If you wanna use an OR condition you ca use a comma separator to specify that like this:

@media (min-width: 1200px), (max-width: 991px){
    .os-icons span{
      margin-left: 6px;
     }
 }

Upvotes: 2

Sven
Sven

Reputation: 252

i am not sure if i understand that right. You want 6px margin left up to 991px and than -3px up to 1200px and than the 6px again? If so i wold do it like the following CSS.

.icons span {
   width: 25px;
   height: 25px;
   margin-left: 6px;
}

@media (min-width: 991px) {
 .icons span {
    margin-left: -3px;
  }
}


@media (min-width:  1200px){
 .icons span{
    margin-left: 6px;
  }
}

or short: 

@media (min-width: 991px) and (max-width: 1200px) {
 .icons span{
    margin-left: -3px;
  }
}

EDIT:

I did a Demo for You. Check out the fiddle

Upvotes: 0

XCS
XCS

Reputation: 28137

You can separate rules with , . 

 @media (min-width: 1200px), (min-width: 991px){
    .icons span{
      margin-left: 6px;
     }
 }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries#comma-separated_lists

Upvotes: 0

Related Questions