Solved

How to keep the thumbnail image aspect ratio?

LIYAShop
Excursionist
30 2 2

https://0db1d3-5b.myshopify.com/products/test

 

The thumbnails for this product are portrait aspect ratio, Shopify renders them as squares. I was able to make it show the whole image within that square, without cropping.

 

How do I change the aspect ratio to make the whole area of the image portrait as well, so that it doesn't have those white stripes on the sides and keep a 10-20px distance between the items?

 

LIYAShop_0-1710164228323.png

 

Accepted Solution (1)

LIYAShop
Excursionist
30 2 2

This is an accepted solution.

Found a solution by adding this code to base.css

 

.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 140% !important;
}

 

As a bonus, I also found a way to align thumbs in the center, because in my case there will mostly be 3 items or less and left alignment just wasn't appropriate.

 

.thumbnail-list {
  grid-template-columns: repeat(5, 1fr) !important;
  margin: 0px auto;
  justify-content: center;
}

 

View solution in original post

Reply 1 (1)

LIYAShop
Excursionist
30 2 2

This is an accepted solution.

Found a solution by adding this code to base.css

 

.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 140% !important;
}

 

As a bonus, I also found a way to align thumbs in the center, because in my case there will mostly be 3 items or less and left alignment just wasn't appropriate.

 

.thumbnail-list {
  grid-template-columns: repeat(5, 1fr) !important;
  margin: 0px auto;
  justify-content: center;
}