I suspect the scroll bar is from telling #menupanel to be 320px, plus a border of 2px, which would make it 324px wide, unless you are using box-sizing:border-box;. That is where I would start looking.
Russ On Nov 20, 2014, at 9:13 PM, Crest Christopher <[email protected]> wrote: > 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:[email protected]> >> 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:[email protected]> >> 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 [[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/
