Help! I would like the product images on all the collections page to be the same size.

Solved
DavidFadimu
Excursionist
20 4 3

Also, the product title and "add to quote" button is not on the same line and identical to each other.

Store: www.dotodone.co.uk 

Password: dotodoneltd

Thank you

Capture.PNG

0 Likes
NgnLoop
Explorer
62 10 46

Please add this in theme.scss file

.product-card__image-with-placeholder-wrapper img {
overflow: hidden;
object-fit: cover;
height: 150px;
}

Just from looking in chrome dev tools, the layout is looking for a max-width and max-height to set image sizes, so you'll want to make all images larger than or at least equal to those max settings so they'll be the same size.

This is how your inline stylesheet in an individual card looks:
 

<style>#ProductCardImage-collection-template-6830823178417 {
    max-width: 330.0px;
    max-height: 220px;
  }

  #ProductCardImageWrapper-collection-template-6830823178417 {
    max-width: 330.0px;
  }
</style>

 

DavidFadimu
Excursionist
20 4 3

This is an accepted solution.

This didn't quite work, images were the same size but the buttons and title were all over the place

0 Likes