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?

48 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
    • inovativ

      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
      • inovativ

        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
    • inovativ

      Glad it helped you Lauren!!

      Reply
    • inovativ

      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
    • inovativ

      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
    • inovativ

      Glad it helped you Kristina!

      Reply
  6. Alex

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

    Reply
    • inovativ

      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
  7. Mike Davis

    >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.

    ————————————————————-
    Thanks so much for mentioning this. I couldn’t understand why there was no difference, but once I did this it works fine!

    Reply
    • inovativ

      You’re welcome Mike, glad to help!

      Reply
  8. GLEN wOODFIN

    After scanning the support requests on the official Elegant Themes site, I wasn’t able to come up with a simple solution that worked as well as yours.

    Thank you so much for sharing your expertise!

    Reply
    • inovativ

      Glad it helped! I still need to update the tutorial for the latest Divi updates, but you must have figured it out. 🙂

      Reply
  9. Emily COMBS

    Mine worked but now I am having issues with the link on mobile devices. On the desktop, links in the slider work just fine. But on mobile devices, the links will not work. Any suggestions?

    Reply
      • Emily

        Dustin,
        That is the exact tutorial I used to add links to background images in full width sliders. The links work fine on a desktop, but you can’t click them on a mobile device. I am wondering if a CSS code needs to be added for the button link option to be able to tap it instead of clicking it?

        Reply
        • trindy

          Hey Dustin and Emily,

          We are experiencing the same problem with links on the slider not working within mobile view, the links work perfectly on the desktop and tablet, just not a phone. We have been unable to solve the issue. Were you able to find a fix?

          Reply
          • trindy

            Hey Emily and Dustin,

            Just wanted to add a quick update to my previous issue. I checked out the link given to Emily by Dustin and started a chat with one of the associates online. She gave me code to input in the Theme options > general settings and it did fix the link issue, but it skewed the slide images to where they were cropped and unreadable. I shared this info with the lady in chat and she was unable to help fix that issue. So I removed the code for now. So, if you have any input on this, we’d be ever so grateful! The code she gave me was:

            .et_pb_slide .et-hide-mobile {
            display: block !important;
            }

          • Dustin Reed

            There is an option under the advanced tab to “Show CTA on Mobile”, if that’s switched off, it may be why your links aren’t working.

  10. Alex

    Lifesaver. Thanks

    Reply
    • inovativ

      Glad it helped!

      Reply
  11. Milad

    Good Job, It works Great.

    Reply
    • Dustin Reed

      Glad it worked for you!

      Reply
  12. Eliana

    Thanks for sharing. Unfortunately is not working for me. I tried removing the text from the sliders. Backgrounds are set as cover. Still images on slider are way cropped on mobile. May be I´m missing something…?

    Reply
    • Dustin Reed

      Hello Eliana,

      Sorry to hear it’s not working for you. I looked at your site and it appears that you’re not using the full-width slider module. The tutorial is meant for that module. If you switch to the full-width module, it should work for you.

      Reply
  13. ALYSSA

    Need help with making the slider mobile responsive please, I tried doing the tutorial but it’s not working

    Reply
    • Dustin Reed

      Hello Alyssa,

      It looks like you have a height of 850px set for the slider. You’ll have to remove that and set your top/bottom padding to a % (Example: 25%).

      Hope that helps!

      Reply
  14. Trent

    Hey Dustin,

    Thanks for posting this article, but I can’t seem to get the slider to display properly. The link to my site is http://www.kcmetroair.com/home. Any chance you could help me out?

    Reply
    • Dustin Reed

      Hello Trent,

      I believe it’s the text/buttons in your slider that’s causing not to work.

      Reply
  15. Rene

    Hi Dustin,

    i have an Fullwith Slider on my Page.
    For Desktop is the Picture size okay, but on Tablet and Mobile is totally crazy

    What can i do?

    Reply
    • Dustin Reed

      Hello Rene,

      Your photos actually look okay to me on mobile. You could try making them a little smaller to improve the quality.

      All the best,
      Dustin

      Reply
  16. Denny

    Genius! Worked perfectly. I had to make a little adjustment in the bottom padding but that was all. Thanks for this solution. I tried numerous other fixes until i came upon this one. Thanks again!!

    Reply
    • Dustin Reed

      Glad it helped! 🙂

      Reply
  17. Sonja

    Hi Dustin,

    I tried your solution on my website and it worked great. But now I’m having issues with it on another website where it just doesn’t seem to be working. The website is: medical-promotion.de
    Maybe you have a solution for me or a tip where it might be going wrong? Thanks so much!

    Reply
    • Dustin Reed

      Hello Sonja,

      Glad the tutorial helped on one of your websites!

      It looks like the slider on your 2nd website is using a button and text. I haven’t found a good way to make the slider responsive when using buttons/text. I would suggest just creating a second slider for mobile that is a simpler version.

      Reply
      • Sonja

        Thanks for the quick reply, creating a second slider for mobile devices using just a button (no text) worked!

        Reply
        • Dustin Reed

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

          Reply
  18. Eugene

    Today I tried to use your code on Divi v.3.21 but failed.
    I have a really fullscreen slider with 1920×1080 images in it.
    If I add 22 or 25% to the top and bottom paddings, slider jumps down from the above section and all looks not good.

    And if to look at the mobile or tablet view we can see huge pixelated images and a mess.
    I thought 22% in desktop view only was a cause of it and removed it and then added it to the mobile and tablet view top&bottom paddings – no use.
    I do not understand where the problem…
    Thanks.

    Reply
    • Dustin Reed

      Hello Eugene,

      Sorry to hear it didn’t work for you. Are you using the full-width slider or full-width header module? The tutorial is written for the full-width slider.

      If you have a button or text on top of the background image, this will affect the responsiveness. If this is the case, your best option is to make a duplicate of the section with a smaller background image, then set it to only display for mobile.

      You could also try going to the “Advanced” tab and add this CSS code in the “Main Element” field: height: 56.25vw; (you will need to adjust the 56.25 to get it right for your images).

      Hope that helps!

      Reply
  19. Rajesh

    Thank you so much! Was finding this from a long time. 😀

    Reply
    • Dustin Reed

      Glad to help!

      Reply

Leave a Reply to Esthon Wood Cancel reply

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