Ensuring that your Slider's images are fully visible without cropping on mobile devices is essential for maintaining a professional and visually appealing website.
In this article, we will guide you through the process of configuring your slider settings in Divi to prevent image cropping on mobile devices.
Note: If you are using Image as Slide's Background images, please check the How to Fix the Slider Module's Background Images Responsiveness article.
Important Note: You need to ensure that all your Slider Images are resized with the same dimensions.
If you are using a Full-Width Slider module, the Slider image's width should be at least 1400px. You can use a height that suits your image, but all your slide images should be the same size.
Open the Slider module's settings, by clicking on the Gear Icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Copy/paste this CSS code:
selector.et_pb_slider .et_pb_slide_image {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
top: auto;
position: relative !important;
display: block !important;
}
selector.et_pb_slider .et_pb_container {
max-width: 100% !important;
width: 100% !important;
}
selector.et_pb_slider .et_pb_slide_image img {
max-height: none !important;
width: 100% !important;
}
selector.et_pb_slider .et_pb_slide {
padding: 0 !important;
}
selector.et_pb_slider .et_pb_slide_with_image .et_pb_slide_description {
position: absolute !important;
width: 100% !important;
padding: 5% !important;
float: none !important;
bottom: 0 !important;
text-align: left;
}
selector.et_pb_slider .et-pb-active-slide .et_pb_slide_image {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
Here's the result with no cropping of the Slider images on any screen sizes:
