¿Las consultas de medios no anulan los estilos nativos?

Question

Me pregunto por qué algunas de mis consultas de medios no anulan los estilos nativos en el puerto de visualización en que se llaman. Estoy tratando de cambiar el estilo de un menú de manera receptiva, apilar y tener la altura del área de navegación más tiempo en un tema de WP. Pero de todos modos agrego las especificaciones que creo para obtener este efecto mediante la edición de Live CSS en Safari o FF inspeccionar elemento: los estilos que inserto en la ventana gráfica específica a la que me dirijo no se están leyendo. Sé que estoy utilizando las consultas de medios correctamente, ya que lee NUEVOS estilos, simplemente no anula nativo? Me falta algo aquí? Esto es lo que intento agregar que no se leerá.

@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%; 
} 

Editar: Aquí está el conjunto COMPLETO de estilos Responsive estoy llamando, si las cosas.

/* =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

El código CSS de su cargo no está funcionando porque es un estilo específico del dispositivo y que está viendo en un Safari, Chrome o Firefox utilizando un ordenador portátil/de escritorio. Se está olvidando que Media Queries le ofrece la posibilidad de aplicar diferentes estilos cuando una página se muestra en un 'navegador' - redimensionado a 480px y en un iPhone (que tiene un ancho máximo de dispositivo de 480px).

Ejemplo 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; 
    } 
} 

En el ejemplo anterior puede orientar tanto y aún así tener un estilo diferente para su dispositivo de elección. Si desea probarlo en un browser solo use las propiedades min-width o max-width.

Espero que esto ayude.

Answer 2

Por ejemplo, la parte superior hay un paréntesis de cierre faltante .

@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%; 
    } 
}