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. Divi is by far the most popular and powerful themes on the market. If your thinking about starting a WordPress website design, I highly recommend you do it with this amazing theme.
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).
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.
Next, you will need to add your slides and set your slider photos as the background image for each slide (see screenshot below).
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.
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.
Having trouble, or just want to save time and have us fix your Divi slider for you?
We’re happy to help and for a limited time we’re offering this service for only $75.00!
Complete the order form below, and we’ll have your slider looking perfect on any screen size or device within 24 hours.