YumYumYum YumYumYum - 2 months ago 8
CSS Question

css3 - why i cant put the margin based on the resolution?

I have a CSS as below. And my screen resolution was 1280x800. Why my class .landslide is not getting the margin value 10% ? but its getting always 18%? even my screen resolution was 1280x800 which should be matching the max-height:800px.

what am i doing wrong?

@media (max-width: 1380px), (max-height: 800px) {
.contact .landslide {
margin: 10% auto 0;
}
}

@media (max-width: 1380px), (max-height: 1024px) {
.contact .landslide {
margin: 18% auto 0;
}
}

Answer

Reverse the rules, otherwise the second one will always overwrite the first one:

@media screen and (max-width: 1380px) and (max-height: 1024px) {
  .contact .landslide {
    margin: 18% auto 0;
  }
}
@media screen and (max-width: 1380px) and (max-height: 800px) {
  .contact .landslide {
    margin: 10% auto 0;
  }
}
Comments