Product images don't align in product collections

[ChrisM187]

Hello, I have different products on my website (trinitysneakers.com) and when for example, sneakers and Clothing, are in the same collection, the images and titles do not align and it does not look clean. I was told it is fixable through code, but i do not know how to code and therefore ask you guys for help. I tried changing the ratio to square or portrait, but then half of the images are cut off. I just want the products to show in equal size, without distorting the image.
Here is an example of how it looks right now:

Maybe having all images as squares, without zooming in or anything would fix that, as seen on sneak.eu website how it would look.
Thank you in advance!

[BSSCommerce-B2B · Accepted solution]

Ok change the previous code like this

.card-wrapper .card__inner {
  height: 140px!important 
}

It will apply for all product card on your site.

If it helps you, please like and mark it as the solution!

Best Regards 😊

[BSSCommerce-B2B]

@ChrisM187 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
 .card__content .card__information { 
     display: flex; 
     flex-direction: column; 
     justify-content: end; 
 }
</style>

Result: 

[ChrisM187]

Unfortunately that did not work, but it is also not the result i'm looking for, if you check out the store i mentioned, sneak.eu , you will see that the products look like this: 

[BSSCommerce-B2B]

If you want to do that, you should use all the images at the same size, or you have to set a fixed size for all the images.

[ChrisM187]

Alright and is it possible to Bulk change the size for all products? or how would i do that then? But as said, the owner of sneak.eu told me it was done by code

[BSSCommerce-B2B]

1. It's the post you could follow to Bulk change the size for all products: https://community.shopify.com/c/shopify-design/is-there-any-way-i-can-resize-all-my-product-images-a...

2. If you want to do it my way and set a fixed size for the images, you can add this code to the end of the base.css file

#collection-template--23534871675226__featured_collection .card__inner {
  height: 140px!important 
}

[ChrisM187]

Thank you, the code worked, but inside the collection it is back to normal sizing, while on the main page it is changed.. is there a way to make it change everywhere? And generally do it for all collections, not just. the featured collection, in order for all products and collections to have the same hight and not look different..

[BSSCommerce-B2B · Accepted solution]

Ok change the previous code like this

.card-wrapper .card__inner {
  height: 140px!important 
}

It will apply for all product card on your site.

If it helps you, please like and mark it as the solution!

Best Regards 😊

[ChrisM187]

Looks great, thank you very much!

[ChrisM187]

Actually, now when i am in the product page itself, the "you may also like" at the bottom of the product page looks like this, cut off..
can we fix this too??

[BSSCommerce-B2B]

@ChrisM187, add this code to  the end  of  base.css file

product-recommendations .card-wrapper .card__inner {
  height: unset!important 
}

Result:

[ChrisM187]

Great, but now the width on the collections and products is too narrow, and the products are slightly cut off on each side.. i would like to have a little space between the products and the product image border, if you get what im saying..

[BSSCommerce-B2B · Accepted solution]

Add more this code to the end of base.css file

.card .card__inner .card__media img {
    object-fit: contain!important;
}