webentwicklung-frage-antwort-db.com.de

Passen Sie die Höhe der Karte in Divi an

Hatte gehofft, die Höhe des Google-Map-Moduls in Divi zu vergrößern, aber mein CSS-Code funktioniert nicht und verstehe nicht, warum. Ich füge den folgenden Code unter Erweitert> Benutzerdefiniertes CSS> Hauptelement des Kartenmoduls ein

.et_pb_map {
     height: 440px;
}

Anregungen wären sehr nützlich!

5
user3682157

Absolute Karte für Divi Theme

  1. Fügen Sie das folgende CSS in das Zeilenelement "Zeileneinstellungen/Benutzerdefiniertes CSS/Spalte" 1 "ein (Spaltennummer ist die Stelle, an der Sie die Karte einfügen werden):
    position:relative;
  1. Fügen Sie dem Map-Modul eine Klasse hinzu. In diesem Beispiel ist die CSS-Klasse absolute_map Fügen Sie im Feld Benutzerdefiniertes CSS das folgende CSS hinzu:
.absolute_map .et_pb_map {
    position: absolute;
    overflow:visible;
    height: 100%; 
}
  1. Sei glücklich!
1
Razvan Stroici

Verwenden Sie den folgenden Code.

Bitte benutzen Sie Ihren Google API-Schlüssel hier in dieser JS-Datei.

Wenn Sie die Höhe der Karte vergrößern/verkleinern wollten, nehmen Sie Änderungen in #div_gmap vor.

      #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>
    

Wenn dieses Ding nicht gut funktioniert, müssen Sie möglicherweise einige der CSS oder ein anderes Framework überprüfen, das dieses Problem verursacht.

Fügen Sie einfach! Wichtig zu Ihrer CSS hinzu

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

Der beste Weg, um herauszufinden, warum der CSS-Dimensionscode nicht funktioniert, ist die Verwendung des Chrome-Entwicklertools. 

Drücken Sie Shift+ Ctrl + I (oder cmd + alt + I, wenn Sie Safari-Benutzer sind) und öffnen Sie die Webdev-Werkzeugleiste. Gehen Sie zum Abschnitt Elements und Sie sehen den Stilcontroller. Im Styles Controller klicken Sie auf die Elemente, die Sie auf der DOM-Seite überprüfen möchten. In Ihrem Fall handelt es sich wahrscheinlich um <div class="et_pb_map">...</div>. Sie können auch Strg + f drücken, um et_pb_map zu suchen.

Nachdem Sie das getan haben, können Sie in der Stil-Registerkarte zur Box-Anzeige gehen und sehen, warum es nicht klappt. 

Ich würde manchmal sagen, wenn Sie Padding/Margin verwenden und die Überlaufeigenschaft nicht gut setzen, werden Ihre Elemente herausgeschnitten. Oder vielleicht wird Ihre Klasse von einer anderen Klasse überlappt. Sie können den eingebetteten Stil verwenden, um diesen <div class="et_pb_map" style="...">...</div> zu überschreiben, oder Sie setzen Ihre Klasse einfach als letzte Klasse in die Klassenattribute.

Beispiel für die Verwendung der Chrome Web Dev-Symbolleiste

0
J Shi

Der einfache Ansatz lautet:

  1. Gehen Sie zu den Divi Theme-Optionen
  2. Scrollen Sie zu Custom CSS
  3. Geben Sie .et_pb_map {height:500px} ein
  4. Klicken Sie auf "Änderungen speichern" (die Karte ändert sich nun auf 500px Höhe).
0

Versuchen Sie, padding anstelle einer expliziten Erhöhung von height hinzuzufügen. 

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

Möglicherweise müssen Sie den Selektor anpassen. In der Regel reicht #map jedoch aus.

und passen Sie den Füllungsprozentsatz an, um das Seitenverhältnis zu ändern. Das ist ansprechend.

Der Grund, warum dies funktionieren könnte, liegt darin, dass padding mehr Platz für die Hintergrund - Map schafft, wenn dieser iframe - gemalt werden soll und dadurch erweitert wird. Lesen Sie hier mehr dazu

Arbeitsdemo auf JSFiddle

0
I haz kode

verwenden Sie! wichtig für Css über Nacht

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

Wenn Sie über diesen Abschnitt (Advanced> Custom CSS> Main Element) des Divi Builder anpassen, fügen Sie einfach die Eigenschaftendeklaration und nicht die gesamte CSS-Regel hinzu.

  Höhe: 440px;
0
myk

Gehen Sie zu Darstellung -> Anpassen -> Zusätzliches CSS und fügen Sie diesen Code ein 

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

Dies hilft Ihnen Überprüfen Sie diese jsfiddle

0
Joel Jerushan

sie müssen keine CSS-Klasse in der erweiterten> benutzerdefinierten CSS hinzufügen. Fügen Sie einfach den Eigenschaftswert 440px hinzu. 

0
partha

Dies ist die einzige Lösung, die für mich funktioniert hat. Weisen Sie Ihrem Kartenmodul eine Klasse zu, d. H. .map-height, und richten Sie es wie folgt aus: 

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