Divi Theme Tutorials

Over the years of working with the Divi theme from Elegant Themes, one of the most common complaints I hear is the fact that, by default, the full-width slider module is not responsive (“mobile-friendly”). This causes the background images to be cropped on certain screen sizes.

In this Divi theme tutorial, I am going to show you a fairly simple way to make the full-width Divi slider responsive.

 

Here are the steps to complete this tutorial:

First of all, you will need to resize/crop all of your photos for the slider, so that they are all the same size. To do this, you will need some sort of photo editing software such as Photoshop, Gimp, or PaintShop Pro, just to name a few of the many programs available. We have found that 1200 x 400 pixels works well for full-width slider photos, but you can use whatever size works best for you.

 

Next, you will need to add a full-width section to the Divi Builder and then add a full-width slider module (see the two screenshots below).

How to make the Divi full-width slider responsive
How to make the Divi full-width slider responsive

Next comes the important step that will make your slider scale correctly, without cropping your photos. In your main slider settings (under Advanced Design Settings), set your top and bottom padding to a % (see screenshot below). I have found that 20% – 25% works best, but you can adjust this to whatever looks best to you.

How to make the Divi full-width slider responsive

Next, you will need to add your slides and set your slider photos as the background image for each slide (see screenshots below).

How to make the Divi full-width slider responsive
How to make the Divi full-width slider responsive

You can see how this tutorial works in the example slider below. If you minimize your screen and slowly adjust the size, you will see that the slider scales with your screen.

 

Note* due to changes in the latest version of Divi, it now takes 2 additional steps to make this work in all browsers.

Add a custom CSS class say custom-slider in Slider Module Settings > Custom CSS > CSS Class

Then add this CSS code into Divi > Theme Options > General > Custom CSS field.

.custom-slider .et_pb_slides .et_pb_slider_container_inner {
display: block;
}

 

I hope you have enjoyed this tutorial and found it useful!

Please feel free to contact us if you ever need help building your Divi websites.

Need Help Building Your Divi Website?


16 Comments

  1. Nicoline

    Great! Thanks a lot!
    If you click on the mobile icon at the end of the padding setting, you can even set it different for Desktop and tablet/smartphone.
    This solved my issue instantly, wonderful.

    Reply
    • mm

      You’re most welcome, glad it worked for you!

      Reply
  2. Arnold

    Followed your steps with no result. Using Divi 3

    Reply
    • Arnold

      My bad! I had earlier set the parallax to “on” and that was affecting the responsiveness.

      Reply
      • mm

        Glad you got it figured out!

        Reply
  3. Rodrigo Azevedo Moreira

    Thank you very very much!

    Reply
  4. lauren

    You are a rockstar! I have searched for two days on info on how to do this.
    Thank you!!!!!

    Reply
    • mm

      Glad it helped you Lauren!!

      Reply
    • mm

      Adding text seems to cause problems with this. I would suggest either adding the text directly to your photos or creating the text as a graphic and displaying it that way. That’s what we’re doing here – http://emakki.ca/newsite/

      Hope that helps!

      Reply
  5. Drew

    I did all of the steps correctly, but my header text is now at the very top of the images instead of in the middle. Any thoughts?

    Reply
    • mm

      Adding text seems to cause problems with this. I would suggest either adding the text directly to your photos or creating the text as a graphic and displaying it that way. That’s what we’re doing here – http://emakki.ca/newsite/

      Hope that helps!

      Reply
    • mm

      Glad it helped you Kristina!

      Reply
  6. Alex

    Hi, unfortunately I cannot find the top and bottom padding in divi 3…

    Reply
    • mm

      Hello Alex,

      Padding is now under the “Design” tab under “Spacing”. You also need to go into each slide and make sure the background size is set to “Cover”. I need to update this tutorial, just haven’t had time lately.

      Hope that helps!

      Reply

Submit a Comment

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