Hola a todos, estoy diseñando una web en la que estoy teniendo problemas a la hora de implementar correctamente los media queries para dispositivos móviles. Básicamente lo que quiero es un diseño alternativo para tablets y otro para Smartphones.
Cuando solo tengo la versión de escritorio y la de las tablets todo funciona correctamente, pero al introducir los media queries para los smartphones, se sobrescribe las reglas para las tablets y se ve igual tanto en tablets como en smartphones
Dejo el código por si alguien me puede indicar donde se encuentra el fallo
Código:
/* Tablets Landscape */
@media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
/* Aquí van los estilos */
}
/* Tablets Portrait*/
@media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
/* Aquí van los estilos */
}
/*Smartphones Landscape*/
@media only screen and (max-device-width: 854px) and (orientation: landscape) {
/* Aquí van los estilos */
}
/*Smartphones Portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* Aquí van los estilos */
}
¿Alguien puede decirme porque al añadir la sección de Smartphones se sobrescribe la sección de las tablets?
Un saludo a todos, y gracias