Foro de elhacker.net

Hola, disculpen pero primera vez que visito estos foros, ojala me puedan ayudar...
Tengo una pagina en prestashop y le estoy insertando el mapa de google en un iframe! En la pagina se ve perfecto pero cuando voy al movil ocupa mucho espacio quisiera hacer un cuadro mas pequeño. Les mando el codigo q tengo en el css
CSS
.map{
position:relative;
margin-bottom: -5px;

}
.map iframe{
width:100%;
min-height:500px;
}
:) :)

El mapa de Google ya viene en un iframe, para qué vas a usar otro.
Simplemente mete el iframe del mapa de Google en un div que puedes llamar google-maps, así:

<div class="google-maps">
<iframe ... src="https://www.google.com/maps/embed?pb=..."></iframe>
</div>
 

Y en el estilo pon esto:

div.google-maps iframe {
    border: 5px solid #000 !important;
    box-shadow: 1px 1px 2px #9c9c9c;
    display: block;
    margin: 10px auto;
    max-width: 96% !important;
}