How to change max-height of Divi Theme using Custom CSS

par intuition | Nov 20, 2016 | Informatique

I use Divi premium template for some of the websites I built.
Divi is very powerful template by ElegantTheme, it allows you to make very beautiful and trendy website, whatever the kind of website you want to build: e-commerce, blog, magazine, portfolio, landing startup page, etc.

For one of my clients, I wanted to change the height of all sliders.

I found a lot of pages talking about it, and we have different ways to do it.

1. We can download a plugin to help us to customize the theme: Divi Booster.
2. We can change the code using Custom CSS

I didn’t want to install another plugin (too many plugins make your website heavier, and it is more complicated when you have to keep all this plugins up to date: compatible with each other and with wordpress itself). Furthermore, I only wanted to change 1 thing and using a plugin just for that is stupid.

Eventually I did not want to buy the update of the template for now and all resources I found on the Internet were for the latest versions of Divi tempate.
So I created a Custom CSS code fo Divi 2.1.12

I pasted the following code in the Divi Theme Options screen :

.et_pb_fullwidth_section, .et_pb_slides, .et_pb_slide, .et_pb_bg_layout_dark, .et_pb_media_alignment_center, .et-pb-active-slide, .et_pb_container clearfix {max-height:300px;padding: 10 0! important;}
.et_pb_slide_description {padding: 10px 1px;}
.et_pb_slide_image {margin-top: -220px;}

I changed the height of sliders and the position of their contents (descriptions and images). When you change the « max-height » do not forget to change « padding » and « margin-top« .

Of course, it is a temporary solution, and it’s crucial when you have a website to maintain it up to date.

I hope this will help you.