resize images in Debut collections

shoeflylimited
New Member
2 0 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

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

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

Replies 3 (3)
dmwwebartisan
Shopify Partner
9711 2221 3049

@shoeflylimited 

Please share store URL & store front password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
shoeflylimited
New Member
2 0 1

hey there @dmwwebartisan 

 

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

 

thanks so much for your reply and assistance!

dmwwebartisan
Shopify Partner
9711 2221 3049

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →