How can I uniformly resize images in Debut collections?

Store Design
1

hello!

Hoping to find some code to ensure all product image thumbnails in my stores Collection pages are all uniform and the same size.

This is what is currently looks like: NOTE RIGHT IMAGES ARE SMALLER LEFT HAVE MORE ROOM AT THE TOP

Screen Shot 2021-11-16 at 2.58.02 pm.png
Screen Shot 2021-11-16 at 2.58.02 pm.png1994×640 142 KB

THIS IS WHAT I WANT IT TO LOOK LIKE: NOTE ALL IMAGES ARE THE SAME SIZE

Screen Shot 2021-11-16 at 2.58.08 pm.png
Screen Shot 2021-11-16 at 2.58.08 pm.png2012×504 132 KB

This would be helpful if the code applies to the homepage as well as individual collection pages, thank you for all your help!

2

@shoeflylimited

Please share store URL & store front password.

Thanks!

3

hey there @dmwwebartisan

website is live and link is: www.shoeflylimited.com.au

thanks so much for your reply and assistance!

1 Like
4

@shoeflylimited

  1. Go to your store. Click on Actions > Edit Code 2. Go to Assets > theme.css add below lines at the bottom of the file.
media screen and (max-width: 749px){
.grid-view-item__image-wrapper .grid-view-item__image {
    position: absolute;
    top: 0;
    max-width: 250px!important;
    max-height: 250px!important;
}

.product-card__image-with-placeholder-wrapper {
    position: relative;
    min-height: 155px;
}
}

@media screen and (min-width: 750px){
.product-card__image-with-placeholder-wrapper {
    position: relative;
    min-height: 255px;
}
}