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:
@media (min-width: 300px) and (max-width: 670px) {
#infoWindow {
min-height: 200px;
background-color: #eee;
position: fixed;
bottom: 5%;
border-radius: 10px;
border: 1px solid #ccc;
z-index: 10;
left: 0;
padding: 1%;
}
}
#infoWindow {
min-height: 200px;
background-color: #eee;
position: fixed;
bottom: 5%;
border-radius: 10px;
border: 1px solid #ccc;
z-index: 10;
left: 33%;
padding: 1%;
max-height: 300px;
overflow-y: auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="infoWindow" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h4 class="text-center"></h4>
<p></p>
<input type="button" class="btn btn-md" id="closeInfo" value="Cerrar">
</div>