CHANGING THE HEIGHT OF DIVI SLIDERS

How to achieve responsive slider heights in Divi

 

Setting the height of sliders in the Divi Theme (and other sites using Divi Builder) can be a surprisingly difficult task. Here's how to take control of your sliders and get them to display at the height you want on desktops, mobiles and tablets.

Option 1: Setting the Slider Height in Divi Builder

First of all, Divi doesn't include a built-in slider height option.

Instead, the height is determined from the contents of the slides. The contents of a slide are typically the slide description (with title, text and buttons) and the slide image. In order to leave some height above and below these contents, Divi adds 16% top and bottom padding to the slide description. So in most cases the height of an individual slide is a result of the slide description height plus the 16% padding.

The height of the slider is then set as the height of the tallest slide, and all slides then are displayed at this same height.

The closest you can get to setting the height of a slider from within Divi itself is to use the "Custom Padding" option in the slide settings. This controls the padding above and below the slide description, and as a result can have an effect on the overall height of the slide and slider.

The benefits of this way is that it's built-in to Divi and the padding can be set separately on desktops, mobiles and tablets (by clicking on the mobile icon that appears to the right of the option).

The downsides include that changes to the slide contents, such as changing text or adding / removing a slide, can through the height unexpectedly out of whack. Likewise word wrapping as you shrink the window size might cause the slider to sporadically increase in height, which is the opposite of what you're likely to want.

Option 2: Setting the Slider Height using Divi Booster

As of version 2.6.4, Divi Booster adds a new slider height option that takes care of the messy details for you.

You'll find the new "Height" option in the Slider Module Settings, on the "Design" tab under the "Sizing" subheading.

In older versions of Divi, you'll find the option either under the "Layout" subheading or, if there are no subheadings, near the bottom of the tab. Please note the option won't be available under "Layout" unless you're using Divi Booster 2.7.2 or higher. If you can't see the option the first thing to try is updating both Divi and Divi Booster to the latest versions.

This option lets you set a minimum height in pixels for your slider. As long as this height is larger than the height of your slide contents, this is the height your slider will be set to. Otherwise, the height of your slide contents will be used.

A separate height can be set on desktops, mobiles and tablets, by clicking on the mobile icon that appears to the right of the Height option when you start editing the height value. Divi doesn't show the mobile icon when the main (desktop) height setting is the default of 500px, but if you change this to something else (e.g. 501px), the mobile icon will appear.

The new Height option is available on standard sliders, post sliders, fullwidth sliders and fullwidth post sliders.

NB: While you should no longer need to deal with it, if you do set the built-in custom padding option on your slides, the Divi Booster feature will honor this and determine the minimum height of the slide to be the contents plus your custom padding. The Height option does, however, override the default padding as this allows it to achieve smaller sliders with no change in the appearance of the slide contents.

Get Divi Booster

Option 3: Setting the Slider Height using CSS

If you want to set the height of a slider using CSS, you can do the following. First, give your slider a "CSS Class" such as "myslider" on the Advanced tab of your slider settings. Then add the following CSS to your site:

/* === Begin: Set the divi slider height === */ /* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */ /* Desktop */ .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 980px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Phone */ @media only screen and (max-width: 767px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Handle padding */ .myslider .et_pb_slide { padding-bottom: 0px !important; } .myslider div.et_pb_slide_description, .myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description { padding-top: 1%; padding-bottom: 1%; } /* === End: Set divi slider height === */

Related Post: Adding CSS to the Divi Theme

You can adjust the slider height to your requirements by setting the min-height values for desktop, mobile and tablet in the code above.

The Old Way: Setting the Slider Height Globally using Divi Booster / CSS

An older slider height option exists in Divi Booster, though I don't recommend using it any longer. You'll find this option on the Divi Booster settings page, under "Modules > Slider > Set default slider height". It sets a default slider height which applies to all sliders, and doesn't apply on mobiles / tablets.

Generally, you're going to find the new "Height" option added into individual modules to be much more flexible and convenient, so I'd always consider that as your first choice. However, I've retained the slider height option for now for people who are still using it or otherwise find it useful.

This option also used a slightly different (and less flexible) CSS implementation. This CSS doesn't handle the custom padding / positioning of the slide description as well as the new code, but here's the old CSS anyway, for completeness:

@media only screen and ( min-width:981px ) { /* Set the slider height */ .et_pb_slider, .et_pb_slider .et_pb_container { height: 425px !important; } .et_pb_slider, .et_pb_slider .et_pb_slide { max-height: 425px; } .et_pb_slider .et_pb_slide_description { position: relative; top: 25%; padding-top: 0 !important; padding-bottom:0 !important; height:auto !important; } }

Want get more out of Divi?

 

 

https://divibooster.com/changing-the-height-of-the-divi-slider/