Media Queries not overriding native styles? - css

Question

I'm wondering why some of my media queries are not overriding the native styles at the view port their being called. I'm trying to restyle a menu responsively, to stack, and have the navigation area's height longer in a WP theme. But every which way I add the specs I create to get this effect via editing Live CSS in Safari or FF inspect element - the styles I insert under the specific viewport I'm targeting are not being read. I know I'm using media queries correctly as it reads NEW styles, just doesn't override native? I'm missing something here? Here's what I'm trying to add that won't read.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
    float: none; // To translate to not to float to the left stack
    position: relative;
}
#access {
    background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    height: 240px; //Changed the height to allow stack
    width: 100%;
}
Edit: Here's the FULL set of Responsive styles I'm calling, if matters.
/* =Responsive Structure
----------------------------------------------- */
#media (max-width: 800px) {
body {
padding: 0;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
#socialpost { margin-left: -100px; }
p {font-size: 12px; }
#sublogo { display: none; }
#footcontain { padding-left: 0;}
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 20px;
text-decoration: none;
#access a { font-size: 12px; }
#access li {
float: left;
margin-left: -28px;
position: relative; }
}
#media (max-width: 650px) {
/* #media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 12px; }
#sublogo { display: none; }
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 13px;
text-decoration: none;
font-size: 11px;}
#footcontain { padding-left: 0;}
#access a {
padding: 0 15px; }
}
#media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 48%; }
#footcontain { padding-left: 0;}
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
.widget-title { margin-top: 35px; }
.flexslider .slides img {
border: 0 none;
display: block;
max-width: 100%;
padding-bottom: 25px; }
#footcontain { display:none;}
#access li {
float: none;
position: relative;
}
#access {
height: 70px;
}
#access a {
color: #000000;
display: block;
font-family: arial;
font-weight: bolder;
line-height: 3.11em;
padding: 0 10px;
text-decoration: none;
}
#access ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -80px;
padding-left: 0;
}
.flex-control-nav { display: none; }
.flexslider {
margin: 0 0 67px; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { padding: 0; }
#access {
height: 70px;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
#sublogo { display: none; }
#access a { padding: 0 10px; }
#access li {
float: none;
position: relative;
}
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 35%; }
#footcontain { display: none; }
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
#footcontain { display: none; }
.widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
#access { height: 70px; }
#access li {
float: none;
position: relative;
}
.flex-control-nav { display: none; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider, check
.flexslider {
margin: 0 0 67px; }
}

Answer 1

The CSS code from your post is not working because it's a device-specific style and you are viewing it on a Safari, Chrome or Firefox using a laptop/desktop. You are forgetting that Media Queries are giving you the possibility to apply different styles when a page is being displayed in a 'browser' - resized to 480px and on an iPhone (which has a max-device-width of 480px).
Example CSS:
/* max-width */
#media screen and (max-width: 480px) {
.one {
background: #F9C;
}
}
/* min-width & max-width */
#media screen and (min-width: 480px) and (max-width: 900px) {
.two {
background: #9CF;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.three {
background: #F90;
}
}
/* iphone specific css */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
In the example above you can target both and still have a separate style for your device of choice. If you want to test it in a browser just use the min-width or max-width properties.
Hope this helps.

Answer 2

On the top example there's a missing closing bracket.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
}