The Divi WordPress theme from Elegant Themes is really a development system that includes a wide range of customizable modules.  I ran into a problem with one module in particular, the Divi slider module.   Out of the box, this module is designed to create slide shows as might be done with Powerpoint.  You can set a background (graphic or color) for each slide, create text that shows up on the right side of the slide and add graphics that show up on the left side of the slide.  You can add as many slides as you want to each slider.

I wanted something much more simple. All I needed was a slider that would display a series of photos with navigation controls (left/right arrows and the dot navigation at the bottom).  That can be easily done with the slider module except that the module bases its height on the text on the slide and I didn’t want any text.  To avoid that,  I provided no information for the slide except my photos as backgrounds.  As a result the slider defaulted to long and short, clipping my photos. I had one slider that displayed several rifles photographed horizontally.  Since they were long and short, the slider worked perfectly.  I had other photos that were more square and they got clipped.  Unfortunately as I write this,  Elegant Themes has not provided any way to directly control the height of the slider.

Generally the quickest way to get solutions to problems like this is to use Elegant Themes 24/7/360 technical support system, so that’s what I did.  First I searched the forum area where users help each other.  There I found the basic code shown below.  Then I opened a conversation with tech support.  The great people there advised me on the best way to set this up.  This is what I learned.

The Solution

The solution, as it is so many times when extending Divi’s capabilities, is custom CSS.  Divi offers the ability to add simple CSS directly attached to individual slides.  What I needed was CSS that could be attached to the entire slider.  The CSS that did the job was this:

.custom_slider .et_pb_container {
height: 70vh !important;
.custom_slider.et_pb_slider, .custom_slider.et_pb_slider .et_pb_slide {
max-height: 70vh;

This code just redefines the slider height.  The two properties, height and max-height, as in  height: 70vh and 
max-height: 70vh, control the size of the area within which the photos appear.  Max-height overrules height.  70vh means 70% of the viewport height.  The viewport is defined relative to the parent’s properties.  I found 70% allowed my entire photos to appear while leaving an appropriate border around them.  You can experiment with these numbers as you wish. Zero makes the photos disappear.  

Note that the class  “custom_slider” doesn’t exist anywhere until I create it and apply it.  Since I want to apply it to specific sliders,  I need to apply it to the slide at issue.  That is done by creating a custom class.  This is a simple as entering “custom_slider”, without the quotes, in the slider settings at Advanced > CSS ID & Classes > CSSClass.

The CSS code itself, as shown above, can go into a child stylesheet, but I prefer to keep it in the database by entering it in Divi’s theme options (Divi > Theme Options and Custom CSS at the bottom of the page).


Developers seem to have a lot of problems with this aspect of the Divi slider.  This simple solution should resolve a lot of those issues.