When using the Slider Layout in the Gallery Module, images of various sizes and aspect ratios can disrupt your page's layout.
You can resolve this issue by applying a custom CSS code.
Add the images to the Gallery Module
Access the Gallery module and insert a selection of images. These images can vary in size and aspect ratio.
Configure the Gallery Module
Edit the Gallery Module, navigate to Desing Tab > Layout, and ensure it is set to Slider.
In the Advanced Tab, locate CSS ID & Classes, and enter
divi-gallery-slideras a custom CSS class. This class will be utilized in the CSS code later on.
Add the CSS code
Finally, proceed to Divi > Theme Options > General Tab > Custom CSS, and input the provided CSS code:
/*Set the height of the slide image*/
.divi-gallery-slider .et_pb_gallery_image img {
width: auto;
height: 600px;
}
/*Align the slide image to the middle*/
.divi-gallery-slider .et_pb_gallery_image {
line-height: 0;
text-align: center;
}
/*Style the slider previous and next buttons*/
.divi-gallery-slider a.et-pb-arrow-prev {
color: #000;
background: #fff;
margin-left: 18px;
opacity: 1;
}
.divi-gallery-slider a.et-pb-arrow-next {
color: #000;
background: #fff;
margin-right: 18px;
opacity: 1;
}
@media all and (min-width: 768px) {
.divi-gallery-slider .et-pb-arrow-next {
opacity: 1;
right: 22px;
}
.divi-gallery-slider .et-pb-arrow-prev {
opacity: 1;
left: 22px;
}
}
@media all and (max-width: 767px) {
.divi-gallery-slider .et-pb-arrow-next {
opacity: 1;
right: 0;
}
.divi-gallery-slider .et-pb-arrow-prev {
opacity: 1;
left: 0;
}
}
Let's compare the default behavior with the custom behavior that we've established using the previously mentioned custom CSS code:
Default behavior:
Custom behavior (using the CSS code):
