Trouble mixing min width and max width media queries?

Question

I am trying to mix both min width and max width media queries like so:

@media only screen and (max-width: 768px) {
  .navibar li a {
    font-size: 8px !important;
  }
}

@media only screen and (max-width: 1300px) {
  .navibar li a {
    font-size: 2px !important;
  }
}

@media only screen and (min-width: 1301px) {
  .navibar li a {
    font-size: 1rem !important;
  }
}

When hitting the 1300px the font size changes to 2px, but never hits the 768px media query. Why is this?

Codepen

Henry Varro Henry Varro · Accepted Answer · 2017-09-27T02:24:44

I think why not? You specific the .navibar li a when max-width: 1300px is 2px, so form 0 to 1300px, they will have that value = 2px.
And since you write the rule of max-width: 1300px after the rule of max-width: 768px, so it always be 2px too even if you have less than 768px width. You should relocate the rule of max-width: 768px after the 1300 one and it will work just fine.
And a side note, try not use !important in your code, it a bad practice. Find other way(s) to override the rule(s), !important should only use to override inline style, which is a bad practice too if you write style like that.

Trouble mixing min width and max width media queries?

1 Answers