[Résolu] HTML version mobile Visite virtuelle

  • WordPress :4.9.4
  • Statut : résolu
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #2171849
    CodeFrixion
    Participant
    Initié WordPress
    13 contributions

    Bonjour,

    J’aimerais intégrer une visite virtuelle Google d’un entreprise. Sur ordinateur tout marche impeccable mais sur Mobile sa ne s’adapte pas du tout 🙁
    C’est un code HTML ajouté à WordPress. Quelqu’un pourrait le modifier pour ajouter la compatibilité mobile ?

    <iframe src="https://www.google.com/maps/embed?pb=!4v1530954381370!6m8!1m7!1sCAoSLEFGMVFpcE54aTlGbGs3ZG5GVUdWaXh5UmdrX0JrbWU0NFNKUEZ5cFI1UXJ6!2m2!1d46.28919136466617!2d7.524133646256246!3f149.69454716777483!4f-7.520902536142742!5f0.7820865974627469" width="1920" height="1080" frameborder="0" style="border:0" allowfullscreen></iframe>

    Merci d’avance
    Lambert

     

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.1.7
    • Thème utilisé : Artbees Jupiter
    • Extensions en place :
    • Nom de l’hébergeur :
    • Adresse du site : je suis en local

     

    #2171853
    PhiLyon
    Modérateur
    Maître WordPress
    20866 contributions

    Bonjour.

    Adresse du site : je suis en local

    Et comment fais-tu pour voir le site sur un mobile, avec le simulateur de ton navigateur ?

    Essaies de mettre la width et la height en %.

    width="100%" height="auto"

    ou l’inverse.

    🙂

    • Cette réponse a été modifiée le il y a 4 months et 1 week par  PhiLyon.
    #2172024
    Noaneo
    Participant
    Maître WordPress
    29138 contributions

    Bonjour,
    https://www.labnol.org/internet/embed-responsive-google-maps/28333/

    <style>
        .google-maps {
            position: relative;
            padding-bottom: 75%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
        }
        .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    </style>
    
    <div class="google-maps">
        <iframe src="https://www.google.com/maps/embed?pb=!4v1530954381370!6m8!1m7!1sCAoSLEFGMVFpcE54aTlGbGs3ZG5GVUdWaXh5UmdrX0JrbWU0NFNKUEZ5cFI1UXJ6!2m2!1d46.28919136466617!2d7.524133646256246!3f149.69454716777483!4f-7.520902536142742!5f0.7820865974627469" width="1920" height="1080" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>

    #2181054
    CodeFrixion
    Participant
    Initié WordPress
    13 contributions

    Yeees ! Parfait merci @Noaneo c’est exactement sa !

    @PhiLyon j’utilise Local by Flywheel avec Ngrok et y a moyen de créer un lien rapide 🙂

    Merci mille fois

    Lambert

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.