Skip to main content

Make Gallery Images All The Same Size

Introduction​

Follow these steps to make your gallery images the same size.

Step 1: Crop Each Image​

The best way of making your gallery images the same size is by cropping each image in the Media Gallery.

Step 2: Add CSS​

If you are using the grid gallery style, add the following CSS to Divi > Theme Options.

@media only screen and (min-width: 768px) {
.et_pb_gallery_grid .et_pb_gallery_image {
padding-top: 56.25%; /* Change this value to be whatever aspect ratio you want, for example if you wanted portrait - try 180% | or square would be 100% */
display: block;
}
.et_pb_gallery_grid .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
}

If you are using the slider, add the following CSS to Divi > Theme Options.

 .et_pb_de_mach_acf_slider_containter_nav .et_pb_de_mach_gallery_item {
padding-top: 56.25%; /* Change this value to be whatever aspect ratio you want, for example if you wanted portrait - try 180% | or square would be 100% */
display: block;
position: relative;
}
.et_pb_de_mach_acf_slider_containter_nav .et_pb_de_mach_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Last updated on