0

Se decidió optar por descargar una plantilla HTML5 y adaptarla,al momento de editar nos dimos cuenta que hay secciones que ignoran los @media screen inferiores y solo toman el último, es decir si tengo uno de 360px otro de 480px y uno de 730px, solo me tomaría el de 730, por ejemplo:

@media screen and (max-width: 480px) {
	
  
     #banner:after {
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			background-color: #0A51913;
			background-image: url("../../images/banner360.png");
			z-index:0;
			background-size:100%;
		    background-position:bottom CENTER;
			background-repeat: no-repeat;
				
			}
  }

@media screen and (max-width: 480px) {
			
						
		#banner:after {
			
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			background-image: url("../../images/banner2.png");
			background-size:100%;
		    background-position:top right;
			background-repeat: no-repeat;
			z-index:10;
				
			}
      
    }

Por el momento si tengo una pantalla de 360 ignora el codigo para este y usa el de 480px, y si se existe otra, ignora los primeros dos y toma el ultimo.

2
  • Usas la etiqueta meta viewport en el html? el 16 feb. 2018 a las 23:52
  • En qué orden pones las queries? Recuerda que en CSS las últimas reglas declaradas son las que prevalecen si cumplen con las especificaciones, por lo que si está primero 360, luego 480 y, al final, 730, la que va a funcionar es la última. Comienza en orden inverso.
    – Triby
    el 17 feb. 2018 a las 4:20

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.