Comment responsive et centrer lien de google map ?

Résolu
Tiger46 Messages postés 274 Statut Membre -  
Tiger46 Messages postés 274 Statut Membre -
Bonjour ...
lorsqu'on va sur google map on peut avoir le code pour intégrer la map dans une iframe mais la map ensuite n'est pas responsive apparemment ou ne s'adapte pas en taille aux mobiles et n'est pas centrée ?

Ca donne ce code actuellement : 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11388.116177725571!2d1.428995!3d44.4735774!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1a0c92ec02a4136e!2sGarage+Mari%C3%A9!5e0!3m2!1sfr!2sfr!4v1539204166329" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


Peut on arranger ça et si oui comment ? Merci :) ...

Merci :)
A voir également:

1 réponse

Réponse 1 / 1
dugenou Messages postés 6262 Statut Contributeur 1 452
 
Bonjour,

Dans ta feuille de style, tu peux donner une dimension maxi à l'iframe, par exemple : 

iframe {
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }


Si tu n'utilises pas de feuille de style, tu dois pouvoir aussi placer l'iframe dans une <div> et ajouter ce style directement à la <div> : 

<div style="margin-left:auto; margin-right:auto; max-width:100%;">
0
Tiger46 Messages postés 274 Statut Membre 1
 
Bjr ... merci dugenou :) ... Je vais essayer :) ... Cependant ou dois je mettre ce code précisément car je peux faire un copié colé mais rajouter une div etc c'est plus compliqué .. ? :) ... Ceci dit en mettant largeur 100% déjà ça dépasse plus sur les bords et c'est centré :) ...
0
dugenou Messages postés 6262 Statut Contributeur 1 452 > Tiger46 Messages postés 274 Statut Membre
 
Pour ce qui est du code CSS, c'est dans la feuille de style de ton site, en général, c'est le fichier style.css, mais dans de nombreux cas, ce n'est pas sous ce nom qu'on le trouve.

Pour ce qui est de la <div>, c'est dans le code HTML de ton fichier. Si tu utilises un CMS, c'est à partir de l'éditeur, il doit y avoir un bouton permettant d'insérer du HTML. Si tu utilises une <div>, n'oublie pas la balise de fermeture </div>.

N'utilise pas les deux solutions en même temps, c'est l'une ou l'autre.
0
Tiger46 Messages postés 274 Statut Membre 1
 
Et ça ? Comment l'aligner au centre ? :) 

<div class="fb-page" data-href="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Bijouterie-Lagarde-533675443667275/">Bijouterie Lagarde</a></blockquote></div>
0
Tiger46 Messages postés 274 Statut Membre 1
 
adapt conteneur true fonctionne pas et largeur 100% non plus :) ...
0
dugenou Messages postés 6262 Statut Contributeur 1 452
 
Comme tu as déjà une class="fb-page", essaie en créant une class avec le même nom dans ta feuille de style, avec ces attributs : 

.fb-page {
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }
0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses