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.

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.

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:

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:

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

203 Comments

  1. federico

    Thanks! It Works! Can I set the slider height in percentage to the size of the browser window? I would like to show a full screen image without cutting it below, thanks and best regards

    Reply
    • federico

      I found my mistake! "vh" instead of "%" 🙂
      have a nice day

      Reply
      • dan

        Great! You too, federico 🙂

        Reply
  2. Nathan Holmes

    My titles in the slider are too low now and not centralised in the vertical centre.

    Reply
    • dan

      Hi Nathan, I've just released an update to this post / feature. The new CSS used keeps the slider titles properly centralised.

      Reply
  3. Pali Madra

    Thank you, Dan, for the code.

    Works perfectly.

    Reply
  4. Chris

    Hello Ryan. How to build a specific full width AND full Height for a mobile screen ? i.e. to get a full picture slider on a mobile phone as you can get on a pc using you code set to more than 700 pix in height: 750px !important; to let a tiny part of the rest of the page to let the people scrolling down. I try to find something similar to one of my pages I made using a single full size page header in a full page row : http://dev.digipicture.com/works/lascaux-30000-ans-une-boutique-par-usm/ please use the developer tools to resize the page because it's 2 different full size sliders called according to pc or tablet/mobile.
    Thanks Chris

    Reply
    • dan

      Hi Chris, I've just released an update (details in the post above) which lets you set a different height on mobile. It won't automatically detect the height of the mobile device, but you can do something like you say – make the height as big or a bit bigger than the main mobile devices you are targeting.

      Reply
  5. Nate Maingard

    Can i use divi booster to change a single slider height?

    Reply
    • dan

      Hi Nate, you can as of Divi Booster 2.6.4. Please see the post above for details.

      Reply
  6. Carlos Figueroa

    How can I control the position of the button? Since I modified the height from the Divi default to 500px height, the button sits on the top of the frame rather than being centered vertically. Suggestions?

    Reply
    • dan

      Hi Carlos, I've updated this feature to keep the proper vertical centering. If you need to, you can also use the "Custom Padding" option in the slide settings to adjust the height of the button (make the top padding bigger than the bottom padding and it will move down, and vice versa it'll move up).

      Reply
  7. Ryan

    Hey Dan, although the slider height change works on desktop, it doesn't seem to transfer to mobile.

    Reply
    • dan

      Hi Ryan, at the moment the code above (and Divi Booster's implementation) restricts the height change to the desktop only and use the Divi default on mobiles.

      This is controlled by this line in the code above:

      @media only screen and ( min-width:981px ) {

      Changing it to:

      @media only screen and ( max-width:980px ) {

      Would make the CSS apply on mobiles instead.

      There isn't currently an option to apply the height on mobiles in Divi Booster. However, I'm currently working on a rewrite of the slider height feature. It'll allow for setting different widths on mobile and tablets, and be configuration on individual modules. I'm close to completing it and hope to have it released in the near future. Thanks.

      Reply
      • Ryan

        Awesome! Thanks Dan! Luckily by just duplicating the sliders, adjusting the visibility ("disable on"), and setting the CSS classes differently this works perfectly. Thanks for the quick fix and I look forward to more improvements in the future!

        Reply
        • dan

          Nice one 🙂

          Reply
          • Yevgenia

            Thank you very much for the code. It works perfectly on the desktop. I changed the height to 600px. But when I look preview in Divi builder, it seems that tablet and phone also keep to 600px, though I copied your code completely. and on the phone it looks badly. My site is on the local server yet, so I cant check it on a real phone. Where can be the problem?

          • dan

            Hi Yevgenia, that code only applied on desktops with the Divi defaults being used on mobile / tablet. I've just updated the code to be mobile responsive. Please see the post for details. Thanks!

  8. Amit Patekar

    Thank you for the css, it worked perfectly.
    Regards
    WPFirm.com

    Reply
  9. Chris

    Hello. It works on desktop, but it doesn't work on mobile or tablet. What could I do? TIA

    Reply
    • dan

      Hi Chris, I've just released an update (see the post above for details) that supports mobile and tablets.

      Reply
  10. Tessa

    How do you get the divi booster full width slider height adjuster to work on smartphone? It works fine on desktop but leaves a horrible gap between slider and text below. Help!

    Reply
    • dan

      Hi Tessa, I've just released a new, improved version of the feature which allows you to change the height on smartphones. The feature is available in Divi Booster 2.6.4 onwards. Please see the post above for details.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *