Sujet Précédent Sujet Suivant

Comment responsive et centrer lien de google map ?

Résolu/Fermé
Tiger46 Messages postés 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023 - Modifié le 10 oct. 2018 à 23:03
Tiger46 Messages postés 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023 - 12 oct. 2018 à 01:23
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 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
11 oct. 2018 à 07:17
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 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023 1
Modifié le 11 oct. 2018 à 11:32
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 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > Tiger46 Messages postés 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023
Modifié le 11 oct. 2018 à 12:55
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 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023 1
Modifié le 11 oct. 2018 à 15:43
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 248 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 19 octobre 2023 1
11 oct. 2018 à 15:43
adapt conteneur true fonctionne pas et largeur 100% non plus :) ...
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
11 oct. 2018 à 16:03
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

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

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

11 réponses