Skip to main content

Make Thumbnail Images All The Same Size In Archive Loop

Introduction

Follow this step to make your Archive Loop images all the same size.

Step 1: Add CSS

Use this CSS to make all your Thumbnail images in the Archive Loop the same aspect ratio (size). Ensure you place this CSS within either your Child Theme style.css or Theme Options > Custom CSS.

.grid-item-cont .et_pb_de_mach_thumbnail .et_pb_module_inner,
.grid-item-cont span.et_shop_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;
}
.grid-item-cont .et_pb_de_mach_thumbnail img,
.grid-item-cont span.et_shop_image img{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}