Chris code works better, although there remains a horizontal scroll bar, maybe that is due to the fact I'm narrowing the browser window too much, a little beyond the min-320px.

Tom your code when I scale the browser window there is a jump or gap. What I mean is, the media querie is kicking in before the 320px is reached.

Christopher

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