Search code examples
htmlcssmedia-queries

@media queries - why does css rule overrule another?

im using a media query for max-width: 768px; and have put the css rule for an element as left: 80px;

then BENEATH this i have another media query targeting max width of 800px and in that i have the same element set to left: 94px;

However when i change the screen size to the smaller 768 and check with firebug the rule of left: 80px; is crossed out and the left: 94px; is being followed.

Any ideas why?

Solution

  • Because max-width:800px override 768px because you call it after 768px so use min-width in place of it