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
On Thu, Nov 20, 2014 at 8:46 PM, Tom Livingston <[email protected]> wrote:
> 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;}
> }
> On Thu, Nov 20, 2014 at 8:37 PM Crest Christopher <
> [email protected]> wrote:
>
> > I have the following Media Queries. When the screen size is 320px the
> > background color for the #menupanel should change to red that is not
> > happening when it is larger then 320px it should remain gray although
> > neither is happening !
> >
> > body {margin:0;padding:0;background-color:blue;}
> > /* Smartphones (portrait) ----------- */
> > @media only screen and (max-width : 320px) {
> > #menupanel {background-color:red;height:400px;width:320px;border:2px;}
> > }
> > #menupanel {background-color:gray;height:400px;width:500px;}
> >
> > Christopher
> > ______________________________________________________________________
> > css-discuss [[email protected]]
> > 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/
> >
> ______________________________________________________________________
> css-discuss [[email protected]]
> 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/
>
______________________________________________________________________
css-discuss [[email protected]]
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/
