3

Tengo un pequeño problema lo que pasa es que al momento de implementar las media query en la pagina web no me detecta todas.

Osea si pongo por ejemplo esta media

      @media (min-width: 768px) {
       .navbar-brand > img {
         width: 121%;
         position: relative;
         left: -25px;
        } 
       }

Me hace todo bien, pero si despues pongo otra media para la version movil por ejemplo

      @media(min-width:425px){
      .navbar-brand > img {
       width: 68%;
       position: relative;
       left: -1%;
       top: 5px;
       }
      }

Me hace todo el cambio en la version movil bien pero al momento de ver los cambios de las demas medias o regresar a la version normal no me las detecta se queda con los cambios de la media mas pequeña

5
  • ¿cuáles son las demás «medias»?
    – Shaz
    el 17 dic. 2018 a las 20:42
  • @Shaz son son de 992px y 480px pero tambien al momento de regresar a la version normal deja los cambios de la media query mas chica
    – Luis Uribe
    el 17 dic. 2018 a las 20:45
  • ¿y cómo deberían quedar? ¿cuál es la versión «normal»?
    – Shaz
    el 17 dic. 2018 a las 20:46
  • Cuestión de orden, en ese orden deberías usar max-width en lugar de min-width, o bien cambiar el orden de las media queries, ya que algo que mide como mínimo 768 también mide 425 y sobreescribe
    – Carmen
    el 17 dic. 2018 a las 20:58
  • Otro posible duplicado: ¿Cómo tengo que situar los media-queries para diseño responsive? el 17 dic. 2018 a las 21:24

1 respuesta 1

5

El orden de las reglas en CSS es muy importante. Si dos reglas diferentes tienen el mismo valor de especificidad, se aplicará la que aparezca más tarde en el código (porque sobreescribe la otra).

Entonces si tienes puesto esto:

@media (min-width: 768px) {
  .navbar-brand > img {
    ...
  }
}

...

@media(min-width:425px){
  .navbar-brand > img {
    ...
  }
}

Siempre se van a aplicar las reglas del segundo media query porque si la pantalla tiene más de 768px de ancho, también va a tener más que 425px, por lo que se entrará en la segunda media query y se sobreescribirán los estilos.

La solución es simple: ordena tus media queries para que los valores más bajos siempre aparezcan primero (cuando estás usando min-widht):

@media(min-width:425px){
  .navbar-brand > img {
    ...
  }
}

...

@media (min-width: 768px) {
  .navbar-brand > img {
    ...
  }
}

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