web-dev-qa-db-fra.com

Ajuster la hauteur de la carte dans Divi

J'espérais augmenter la hauteur du module Google Map dans Divi, mais mon code CSS ne fonctionnait pas et je ne comprenais pas pourquoi. Je colle le code suivant dans Avancé> CSS personnalisé> Élément principal du module Carte

.et_pb_map {
     height: 440px;
}

Toutes les suggestions seraient très utiles!

csswordpress
5
user3682157

Carte absolue pour le thème Divi

  1. Ajoutez le code CSS suivant dans l’élément principal Paramètres de ligne/CSS personnalisé/Colonne "1" (le numéro de colonne indique l’emplacement où vous placerez la carte):
    position:relative;
  1. Ajouter une classe au module de mappage. Dans cet exemple, la classe CSS est absolute_map Ajoutez le CSS suivant dans la zone CSS personnalisée:
.absolute_map .et_pb_map {
    position: absolute;
    overflow:visible;
    height: 100%; 
}
  1. Soyez heureux!
1
Razvan Stroici

Utilisez le code ci-dessous.

S'il vous plaît utiliser votre clé API Google ici dans ce fichier js.

Si vous voulez augmenter/diminuer la hauteur de la carte, apportez les modifications dans #div_gmap .

      #div_gmap {
        height: 440px;
      }
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
<div id="div_gmap"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('div_gmap'), {
          center: {lat: 22.3039, lng: 70.8022},
          zoom: 12
        });
      }
    </script>

Si cette chose ne fonctionne pas bien alors peut-être besoin de vérifier certains des css ou tout autre framework causant ce problème.

0
Emipro Technologies Pvt. Ltd.

Il suffit d'ajouter! Important à votre css

.et_pb_map {
     height: 440px !important;
}
0
Aman Kumar

La meilleure façon de vérifier pourquoi le code de dimension css ne fonctionne pas est d'utiliser l'outil de développement chrome. 

Appuyez sur Shift+ Ctrl + I (ou cmd + alt + I si vous êtes un utilisateur de safari) et ouvrez la barre d'outils de développement Web. Allez dans la section Elements et vous verrez le contrôleur de styles. Dans le contrôleur de styles, vous cliquez sur les éléments que vous souhaitez vérifier du côté du DOM, dans votre cas, il s'agit probablement de <div class="et_pb_map">...</div>, ou vous pouvez appuyer sur ctrl + f pour rechercher et_pb_map.

Une fois que vous avez fait cela, vous pouvez accéder à la visionneuse de boîtes dans l'onglet style et voir pourquoi cela ne fonctionne pas. 

Je dirais que parfois, si vous utilisez padding/margin et que vous ne définissez pas correctement la propriété overflow, vos éléments seront tronqués. Ou peut-être que votre classe est imbriquée par une autre classe. Vous pouvez utiliser le style embed pour remplacer ce <div class="et_pb_map" style="...">...</div> ou simplement placer votre classe comme dernière classe des attributs de classe.

Exemple d'utilisation de la barre d'outils chrome web dev

0
J Shi

L'approche simple est:

  1. Aller aux options de thème Divi
  2. Faites défiler jusqu'à CSS personnalisé
  3. Entrez .et_pb_map {height:500px}
  4. Cliquez sur Enregistrer les modifications (la carte passera désormais à une hauteur de 500 pixels).
0
David W Stewart II

Essayez d’ajouter padding au lieu d’une augmentation explicite de height. 

#map ,#map .et_pb_map {padding-bottom: 56.25%}

_ {Vous devrez peut-être ajuster le sélecteur. Habituellement, #map suffit.}

et ajustez le pourcentage de remplissage pour modifier le rapport de format. C'est réactif.

La raison pour laquelle cela pourrait fonctionner est que padding crée plus d'espace pour l'arrière-plan - map dans le cas de cette iframe - à peindre et donc en l'agrandissant. Lisez-en davantage ici

Démo de travail sur JSFiddle

0
I haz kode

utiliser! important pour la nuit css

.et_pb_map {
     height: 440px !important;
}
0
Shital Marakana

Si vous personnalisez via cette section (Avancé> CSS personnalisé> Élément principal) de Divi Builder, ajoutez simplement la déclaration de propriété, et non la règle CSS complète.

  hauteur: 440px;
0
myk

Allez à Apparence -> Personnaliser -> CSS supplémentaire et collez ce code 

.et_pb_map iframe {height: 400px !important; }

Cela vous aidera Vérifiez ce jsfiddle

0
Joel Jerushan

pas besoin d'ajouter la classe css dans le css avancé> personnalisé. ajoutez simplement la valeur de la propriété 440px. 

0
partha

C'est la seule solution qui a fonctionné pour moi. Attribuez une classe à votre module de carte, c.-à-d. .map-height et ciblez-la comme suit: 

.map-height .et_pb_map {
    overflow:visible;
    height: 500px!important;
}
0
Radi