No se aplica media-query en elemento en móvil

publicado por: Anonymous

Estoy haciendo un div tipo “Modal” de Bootstrap. Todo funciona bien, he centrado la caja cuando se consulta en escritorio y debería de pasar lo mismo cuando es consultado en un teléfono. He puesto una sentencia left:33% en CSS para centrarlo y cuando sea un dispositivo móvil sea un left:0, pero no me está resultando: cuando es escritorio no hay problema, pero cuando es móvil el div se sale de la pantalla. ¿Cómo puedo solucionarlo?

Éste es mi código:

_x000D_

_x000D_

@media (min-width: 300px) and (max-width: 670px) {_x000D_
  #infoWindow {_x000D_
    min-height: 200px;_x000D_
    background-color: #eee;_x000D_
    position: fixed;_x000D_
    bottom: 5%;_x000D_
    border-radius: 10px;_x000D_
    border: 1px solid #ccc;_x000D_
    z-index: 10;_x000D_
    left: 0;_x000D_
    padding: 1%;_x000D_
  }_x000D_
}_x000D_
_x000D_
#infoWindow {_x000D_
  min-height: 200px;_x000D_
  background-color: #eee;_x000D_
  position: fixed;_x000D_
  bottom: 5%;_x000D_
  border-radius: 10px;_x000D_
  border: 1px solid #ccc;_x000D_
  z-index: 10;_x000D_
  left: 33%;_x000D_
  padding: 1%;_x000D_
  max-height: 300px;_x000D_
  overflow-y: auto;_x000D_
}

_x000D_

<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
_x000D_
<!-- jQuery library -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- Latest compiled JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<div id="infoWindow" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">_x000D_
  <h4 class="text-center"></h4>_x000D_
  <p></p>_x000D_
  <input type="button" class="btn btn-md" id="closeInfo" value="Cerrar">_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

En CSS el orden de las reglas puede afectar el resultado. Cuando el navegador procesa el CSS, calcula la especificidad de cada una de ellas y si el mismo elemento tiene varias reglas diferentes que le afectan, se dará prioridad a la que sea más específica.

Ahora, si dos reglas tienen la misma especificidad (como es el caso), entonces se aplicará la que aparezca más tarde en el código. En tu código la media query aparece primero y luego viene una sin nada (solo el id del elemento), por lo que se aplicará esa última en caso de conflicto, creando el problema que ves.

La solución entonces es mover la media query al final:

_x000D_

_x000D_

#infoWindow {_x000D_
  min-height: 200px;_x000D_
  background-color: #eee;_x000D_
  position: fixed;_x000D_
  bottom: 5%;_x000D_
  border-radius: 10px;_x000D_
  border: 1px solid #ccc;_x000D_
  z-index: 10;_x000D_
  left: 33%;_x000D_
  padding: 1%;_x000D_
  max-height: 300px;_x000D_
  overflow-y: auto;_x000D_
}_x000D_
_x000D_
_x000D_
@media (min-width: 300px) and (max-width: 670px) {_x000D_
  #infoWindow {_x000D_
    min-height: 200px;_x000D_
    background-color: #eee;_x000D_
    position: fixed;_x000D_
    bottom: 5%;_x000D_
    border-radius: 10px;_x000D_
    border: 1px solid #ccc;_x000D_
    z-index: 10;_x000D_
    left: 0;_x000D_
    padding: 1%;_x000D_
  }_x000D_
}

_x000D_

<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
_x000D_
<!-- jQuery library -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- Latest compiled JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<div id="infoWindow" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">_x000D_
  <h4 class="text-center"></h4>_x000D_
  <p></p>_x000D_
  <input type="button" class="btn btn-md" id="closeInfo" value="Cerrar">_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *