Sometimes bigger content is better to be displayed on your website. One good example of this is using a full height map. And with Divi Map Module, all you can get is a full width map, but not a full height map.
This is how a map module looks like when you entered the basic info.
But then again, sometimes bigger content area is better if you really want to send your message accross. Now lets focus on how we can create a fullwidth map and at the same time full height.
Achieving a full height map is not that complicated. I have created a readily solution for you.
1 – Navigate to the row where you’ve placed your map module.
2 – Make sure that you only have the map module on this row.
3 – On the row settings, navigate to advanced tab, then add ‘fullheight_map’ without quotes in Column CSS Class.
4 – On the same row settings, navigate to Design Tab and make sure to select YES to ‘Make This Row Fullwidth’
5 – Then just below that same settings tab, make sure to use a custom gutter and drag the gutter range to 1 or the minimum.
6 – Save/Publish your page.
7 – Copy and paste the following CSS code below to Divi – > Theme Options – > Custom CSS.
.fullheight_map {
position: relative;
}
.fullheight_map .et_pb_map_container {
min-height: 100vh;
}
.fullheight_map .et_pb_map {
height: 100%;
position: absolute !important;
}
8 – Save your settings.
That’s it. Take a look how the end result looks like on your device 🙂
Let me know what you think or if you need help or tweak with Divi modules in the comment section below.