(701) 732-0799

The following article was written for Divi 2.7.X

By default the height of Divi fullwidth Slider slider is too tall for most text applications. Currently, there is no built in function change the divi fullwidth slider height adjustment. The best way to make adjustments to the Divi fullwith  slider height is to have a child theme setup, but if you do not you can use the divi theme provided epanel-> Custom css field. (Bottom under divi theme options)

Instructions on How to Change the Height of the Divi Fullwidth Slider:

To make changes to the height of the divi slider you will want to create a custom CSS class for your slider. (Create the full length slider and scroll down)

Image of how to create a Create a Custom CSS Class in DIVI

How to create a custom CSS Class in DIVI for the full length slider.


If you used “homeSlider” for the class name. Add the following line of code to your “epanel-> Custom css field” or the CSS file in your child theme.

.homeSlider .et_pb_container {width: 100%; height: 150px; }

The code above will set a hard limit on the height for the full screen slider in the DIVI theme.¬† However, that line of code alone will likely cause you problems because of the padding used by the divi theme by default.¬† At the following line of code as you did above and make adjustments to the padding as needed. “!important” will override the default formatting.

.homeSlider .et_pb_slide_description{padding-top:20px !important; padding-bottom:20px !important;}


It would look like this.

CSS CODE for Adjustment




If you wanted to edit all of the the fullwidth sliders you would use the following code and if ignore the custom CSS class creation.

CSS CODE for Adjustment2