Tom, as I shrink the viewport before I reach 320px the box is red, shouldn't it wait until the viewport is at 320px ?

Christopher

Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 9:39 PM
Look at this:
http://tomliv.com/css-d/mq/

I am using min-width. So the viewport needs to be *AT LEAST* as wide as the dimension used. Can be wider, up to the next breakpoint (MQ). Think mobile first...



Chris Rockwell <mailto:ch...@chrisrockwell.com>
Thursday, November 20, 2014 8:50 PM
Using a media query doesn't contribute to specificity, so your code would work if you moved the declaration that sets the color to gray above the media query.

If you wanted to get all "mobile first" on it, you could do:

#menupanel { background-color: red }
@media (min-width: 321px) { #menupanel { background-color: gray; } }



Chris Rockwell


Tom Livingston <mailto:tom...@gmail.com>
Thursday, November 20, 2014 8:46 PM
Try:

@media only screen and (min-width : 320px) {
#menupanel {background-color:red;height:400px;width:320px;border:2px;}
}

@media only screen and (min-width : 600px) {
#menupanel {background-color:gray;height:400px;width:500px;}
}
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to