I am currently utilizing zurb foundation. The issue I am facing is that regardless of the viewport size, the body background color always remains red when using the code below:
@media only screen and (min-width: 64.063em) {
.body {background: red;}
}
@media only screen and (min-width: 90.063em) {
.body {background: blue;}
}
@media only screen and (min-width: 120.063em) {
.body {background: green;}
}
Oddly enough, adding !important declarations is the only way to get the body color to change as the viewport size increases:
@media only screen and (min-width: 64.063em) {
.body {background: red;}
}
@media only screen and (min-width: 90.063em) {
.body {background: blue !important;}
}
@media only screen and (min-width: 120.063em) {
.body {background: green !important;}
}
It seems like this approach might not be correct. Can you advise on what I might be doing incorrectly?