How to Change Slider Height on Divi Theme

by Last Updated: Sep 4, 2022Blog, 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.

 

How to Change Divi Slider Height

 

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.

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

5 Free WordPress Plugins You Should Use

Banner Blue Biz Child Theme

Andrej

Author: Andrej

WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.