Adjust Height of Map in Divi

user_3682157 0
Viewed 7913

Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module

.et_pb_map {
     height: 440px;
}

Any suggestions would be very useful!

wordpress css
11 Answers

Absolute Map for Divi Theme

  1. Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
    position:relative;
  1. Add a Class to Map Module. In this example the CSS Class is absolute_map Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
    position: absolute;
    overflow:visible;
    height: 100%; 
}
  1. Be happy!
user_81095900

This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this: 

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

The simple approach is:

  1. Go to Divi Theme Options
  2. Scroll down to Custom CSS
  3. Enter .et_pb_map {height:500px;}
  4. Click Save Changes (the map will now change to 500px height)
user_97144140
Related