1

Tengo el siguiente problema, en los estilos responsive, me funciona y se me adapta bien mi sitio web los tamaños 480px, 768px, y 1024px, pero al momento de usar el 1600px, este no me agarra o no funcionan los tamaños, alguien sabe porque puede ser?

https://i.sstatic.net/6AZbc.png

3
  • 4
    Podrías agregar un snippet de código que reproduzca el problema? Porque el código de la imagen no presenta ningún error Commented el 5 dic. 2019 a las 16:08
  • 1
    El .main__about... está afuera del corchete que cierra al media query de 1600px Commented el 5 dic. 2019 a las 16:34
  • 1
    si cuelga el codigo te podriamos ayudar , en la imagen parentemente es que la clase .main_about esta afuera prueba en meter todo dentro del media query 1600 px
    – Janpweb
    Commented el 5 dic. 2019 a las 17:59

1 respuesta 1

4

introducir la descripción de la imagen aquí

En el siguiente ejemplo te muestra el comportamiento de los media query. Recuerda que la propiedad screen se refiere a solo pantalla y el min-width define desde qué tamaño y hasta el máximo de la pantalla (screen) aplica el cambio.

https://codepen.io/cesarbmolina/pen/rNaOVmZ

Te dejo la documentación para que la leas y puedas entender un poco más a profundidad.

Aquí el código por si lo quieres replicar:

body {
  margin: 0;
  padding: 0;
  font-family: arial;
}

.container {
  background: pink;
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-responsive::before {
  content: ' full screem';
  margin-left: 10px;
  padding: 10px;
  color: yellow;
  background: blue;
  text-transform: uppercase;
}

@media screen and (min-width: 480px) {
  .container {
    background: black;
    color: white;
  }
  .size-responsive::before {
    content: 'desde 480px';
  }
}

@media screen and (min-width: 768px) {
  .container {
    background: orange;
  }
  .size-responsive::before {
    content: 'desde 768px';
  }
}

@media screen and (min-width: 1024px) {
  .container {
    background: olive;
  }
  .size-responsive::before {
    content: 'desde 1024px';
  }
}

@media screen and (min-width: 1600px) {
  .container {
    width: 1400px;
    margin: 0 auto;
  }
  .size-responsive::before {
    content: 'desde 1600px';
  }
}
<div class="container">
  Resultado en resolucion <span class="size-responsive"></span>
</div>

0

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.