making thumbnails the same size

[itspedro]

Hi,
I've made a page with thumbnails using the Element Grid. The photo dimensions aren't the same for all photos. Is there a way to make the thumbnails the same size for the whole page?


[zxhxri]

I used this code for a website I'm working on. It creates a 3:4 ratio for every thumbnail regardless of the original thumbnail dimensions. Add it to your Desktop & Mobile CSS:

.thumb-collection .ph {
position: relative;
width: 100%;
padding-bottom: 75% !important; /* 3 / 4 = 0.75 = 75% */
overflow: hidden;
}

.thumb-collection .ph img,
.thumb-collection .ph video {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}

[itspedro]

This post is deleted!

[arminunruh]

.element-wrap .ph{
    padding-bottom: calc(9 / 16 * 100%)!important;
}
.element-wrap img,
.element-wrap video{
    aspect-ratio: 16 / 9!important;
    object-fit: cover;
    object-position: center;
}

this is for 16:9 for example.

Enter this css in "lay options" -> "custom css & html" -> "custom css"
@zxhxri thanks a lot for your help! your css is correct, but its the right one for thumbnailgrids

but he uses an elementgrid

[itspedro]

Works like a charm. Thanks a lot @zxhxri and @arminunruh.