33

I'm redesigning my blog with responsive web design in mind, and the "mobile first" method - In short I'm trying to use min-width to avoid any kind of replication or css.. no display:none's etc..

My problem is that when I do need to over-write a CSS value, the lower min-width takes precedence. Example:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

I'd expect when I'm in resolutions of 600px and above to get a 2.2em h2, but instead I get 1.7em.. In my Dev tools I see that the 2.2em declaration is there, but the other one takes precedence.. It doesn't make sense!

Could I keep using min-widths and effectively overwrite declarations in higher resolutions without using stronger selectors or max-width..?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
George Katsanos
  • 13,524
  • 16
  • 62
  • 98
  • 4
    To clarify on BoltClock's answer below, this is what the browser is thinking: It hits the first media query, 'Oh, I have a min-width of 600! Let's set my font size to 2.2em!'. Then it continues onto the next media query, 'Oh, I have a min-width of 320! Let's set my font to this now!'. – Josh Allen Apr 25 '12 at 19:18
  • 1
    The unicorn's answer is correct, but maybe you should think in terms of max-width instead of min-width. If you want a smaller H2 size on smaller screens, you can write `font-size: 2.2em` without media query and then `font-size:1.7em` in a query for `max-width:599px`. – Mr Lister Apr 25 '12 at 19:19
  • max-width is not really a good practice.. hard to explain but when you use max-width you end up re-writing duplicating CSS .. check http://www.html5rocks.com/en/mobile/responsivedesign/ – George Katsanos Apr 25 '12 at 21:03

1 Answers1

36

I'd expect when I'm in resolutions of 600px and above to get a 2.2em h2, but instead I get 1.7em.. In my Dev tools I see that the 2.2em declaration is there, but the other one takes precedence.. It doesn't make sense!

It makes sense. If the media fulfills min-width: 600px, then it should also fulfill min-width: 320px; in other words, anything that's at least 600 pixels wide is also at least 320 pixels wide, because 600 is greater than 320.

Since both media queries evaluate to true, the rule that occurs last takes precedence in the cascade, making your code equivalent to this:

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

That explains why the 2.2em appears in your developer tools but doesn't take apparent effect.

The easiest fix is to switch your @media blocks around so your rules cascade in the correct order:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    CSS specificity takes also into account order of appearance... sometimes you just miss the most obvious things when you spend 12h in front of the pc! Thanks Unicorn:) – George Katsanos Apr 25 '12 at 21:02
  • I don't get it. How come if a media of at least 600px wide is also at least 320px wide? is that really mean it **could** be 320px wide(e.g., by resizing the browser window to be smaller)? – John Wang Oct 07 '13 at 06:08
  • @John Wang: 600px is more than 320px. So if something is 600px or wider, it's also 320px or wider. That's the meaning of "at least". – BoltClock Oct 07 '13 at 07:19
  • @BoltClock Thank you sir, got it. After playing with some sample code, I realized *min-width* could be read as "greater-equal than". That makes it more straightforward for understanding: "give me font-size at 2.2em if the screen width is greater-equal than 600px" – John Wang Oct 07 '13 at 07:41
  • `min-width` (outside of this question context) could have been read as "minimum width that this rule can apply to" which is inverse of what is explained here. For example `min-width: 600px` could be read as "the browser's width must be **no smaller** than 600px" in order for this rule to apply. That's why this sentence: `If the media fulfills min-width: 600px, then it should also fulfill min-width: 320px` makes no sense on first read-through if you are not a day-to-day CSS developer who knows the actual semantics. – chakrit Jul 24 '23 at 04:00