YumYumYum YumYumYum - 2 months ago 6
CSS Question

css3 - Why can't I set margin based on the resolution?

I have CSS below. My screen resolution is 1280x800. Why is my class

.landslide
not getting the margin value
10%
? Right now it's always getting
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;
  }
}