Ensuring that your Slider module’s fully responsive background images are crucial for maintaining a visually appealing and professional website across all devices.
In this article, we will guide you through the process of fixing the responsiveness of background images in the Slider Module using Divi.
To ensure that the background images used in the Slider Module are correctly displayed on all devices, you need to properly set the Slider's Height using responsive values such as %, vw, etc, for the Top and Bottom padding properties.
Situations using the Slider module are as follows:
The slides have content (Title, Content, Button)
The slides don't have any content
The slides have content (Title, Content, Button)
Each Slide height is given out of the box by summing the heights of all inner elements, such as the title, content, and button. Besides those heights, we also have the default Top and Bottom padding of 16%.
All those values combined will result in the final height of the Slider module. Sometimes, you must either decrease or increase the height so that each background image shows as well as possible, especially on mobile devices.
Let's look at the following example:
Depending on the Background Image Size and Position used, some parts of the background image may be hidden on mobile devices (because the slider's original aspect ratio differs from the background image's aspect ratio width/height).
To fix this, follow these steps:
Open the Slider module settings by clicking on the Gear icon
Go to the Design Tab → Spacing → Padding and add some extra Top and Bottom padding. Just remember to use values expressed in % or vw.
Enable the Responsive settings for the Padding option and make adjustments for Tablet and Phone
In the example above, the Top and Bottom padding was set to
28% for the Desktop Top and Bottom Padding
19% for the Tablet Top and Bottom Padding
3% for the Phone Top and Bottom Padding
Allowing the Background Image to be fully visible without cropping on mobile devices.
Devices | Result |
Desktop |  Click on the image to see it in full resolution |
Tablet |  Click on the image to see it in full resolution |
Phone |  Click on the image to see it in full resolution |
Note: Slider module dimensions can be controlled like so:
Width of the Slider - based on the width of the Row which contains the Slider Module
Height of the Slider - using custom Top and Bottom Padding values (recommended to be expressed in % or vw )
The slides don't have any content
As explained above, out of the box, the height of the Slider module is set by summing the heights of inner elements such as Title, Content, Button, and the default top and bottom padding, which is set to be 16%.
This can be a problem if the Slider module has no content except an image set as a background image. By default, we get this look:
To fix that, you need to increase the Slider's Height.
Open the Slider module settings by clicking on the Gear icon
Go to the Design Tab → Spacing → Padding and add some extra Top and Bottom
In this case (based on the size of the background image using the values used for the Top and Bottom Padding is 32% and the result is:
The same thing applies if you are using a Fullwidth Row, only this time, the values for Top and Bottom Padding will be 50% (because the full-width Row has more width available than a regular Row).