How to Change Slider Height on Divi Theme

Today I’m going to give you a quick tip on how to change the height of the Divi slider module. You may have come into a situation when you created a Divi website with a slider and the size of your slider was just not right. It might be too low or too high. To modify this, just add the following code into the Divi custom CSS field (in your WP admin panel: Divi > Theme Options) or to your child theme’s style.css file:

.et_pb_slider, .et_pb_slider .et_pb_container {
height: 600px !important;
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
max-height: 600px;
}

This code will take care of it. Change the “600px” values with your preferred slider height.

You can also change the 600px value to e.g. 20vh value, what would be 20% of the viewport height. This way the slider height would be responsive, as it would switch its height to 20% automatically on every device.

If you still have problems, just try playing with the top and bottom padding values of your slider images.

Pretty simple, isn’t it? Are you looking for more Divi quick tips? Feel free to email me and let me know about what would you like me to write the next time. Also, don’t forget to opt-in for my email newsletter and I will notify you every time when I publish a new article on this blog.

You can also add this code to the custom CSS field in the Divi settings of a particular post or page – in case you want to apply it to one particular post or page only.

PS: You might also like to check out my other article on how to make the fullwidth post title taller on Divi.