All things Shopify and commerce
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?
Solved! Go to the solution
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;
}
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;
}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024