rendre iframe responsive

[Polo1212]

Bonjour,

J'aimerais avoir dans ma page un plan google maps responsive, j'ai essayé quelques choses sur mon code CSS cela fonctionne mais la taille ne me convient pas.

J'aimerais savoir comment je peux modifier la taille de mon iframe google maps tout en gardant mon iframe responsive.

Je vous mets le code CSS et HTML nécessaires ci-dessous.

Merci d'avance pour votre aide.

Code HTML :

<div class="details-boutique-block-2">
                <!--Google map-->
                <div class="gmap">
                    <iframe src="https://www.google.com/maps/embed? 
pb=!1m18!1m12!1m3!1d2903.95363326608!2d5.589339015573548!3d43.29429267913517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12c9a394d7445bc3%3A0xffc2c45cd41b3800!2sBijouterie%20RUBY!5e0!3m2!1sfr!2sfr!4v1619356410732!5m2!1sfr!2sfr" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <!--Image boutique-->
                <div class="img-a-propos">
                    <img src="img/boutique1.jpg" alt="Bijouterie RUBY">
                </div>
           </div>

Code CSS :

.details-boutique-block-2 {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    margin-bottom: 1.7em;
}
 
.gmap {
    width: 80%;
    height: auto;
}
 
 
.img-a-propos img {
    width: 70%;
    height: auto;
}

-----

[umfred]

dans le CSS avec un truc du genre

.gmap iframe{
 width: 80%;
 height: auto;
}

Sinon les autres solutions consistant à agir sur le padding-top du conteneur de l'iframe que l'on trouve à foison en utilisant son moteur de recherche ?https://www.google.com/search?q=iframe+responsive

[Ikhar84]

Comme signalé par Umfred, en utilisant des pourcentages au lieu d'unités pour les tailles (la largeur suffit en général, on ne spécifies pas la hauteur pour conserver le ratio...).

Ou mieux et fait pour : les media queries.

Avec des section @media screen and (...) avec les screen breakpoints qui vont bien ...

Edit: si c'est pour progresser, regardes du côté de la grid Bootstrap assez simple à comprendre avec un système de col dans des row...

La mise en page est parfaite et responsive ...