Adjust the height of the card in Divi

Question

I was hoping to increase the height of the google map module in Divi, but my CSS code does not work and does not understand why. I insert the following code in Advanced> Custom CSS> The main element of the map module

.et_pb_map {
     height: 440px;
}

Any suggestions would be very helpful!

Answer 1

Absolute Map for Divi Theme

• Add the following CSS in the line settings / custom CSS / column "1" The main element (the column number is where you put the map):

    position:relative;

2. Add a class module to the map. In this example, the CSS class is absolute_map Add the following CSS to the Custom CSS field:

.absolute_map .et_pb_map {
    position: absolute;
    overflow:visible;
    height: 100%; 
}

3. Be happy!

Answer 2

padding height.

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

, . #map .

, . .

, , , - iframe - , .

JSFiddle

Answer 3

(Advanced > Custom CSS > Main Element) Divi Builder, CSS.

 height: 440px;

Answer 4

css > css. 440px.

Answer 5

! css

.et_pb_map {
     height: 440px !important;
}

Answer 6

! css

.et_pb_map {
     height: 440px !important;
}

Answer 7

.

, API Google js.

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

Hide result

, , css , .

Answer 8

, CSS , - chrome dev.

Shift+ Ctrl + I ( cmd + alt + I, ) -. , . , DOM, <div class="et_pb_map">...</div>, ctrl + f et_pb_map.

, .

, , padding/margin , . , , . embed, <div class="et_pb_map" style="...">...</div>, .

Chrome Chrome

Answer 9

→ → CSS

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

jsfiddle

Answer 10

, . , .. .map-height, :

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

Answer 11

:

1. Divi Theme Options
2. Custom CSS
3. .et_pb_map {height:500px;}
4. Save Changes ( 500px)