Dawn theme: Changing image ratio of thumbnails on product page

Store Design
1

Hello,

My product images are a mix of vertical, horizontal, and square. On my product pages, I’m using the thumbnails option and they all appear cropped into square. I’d like the thumbnails to match the original ratio of the images.

I tried adding this custom css that I saw in another answer, but it caused the vertical thumbnails to overlap any thumbnails that appeared in a row below.

This was the custom css:

.thumbnail-list__item
.thumbnail { height: auto !important;}

How can I make the thumbnails match the original ratio of my images AND put enough space between rows of thumbnails so they don’t overlap?

My store URL is https://littlehammergames.com/

Thanks!

2

That worked, thanks!

Do you happen to know what code I would need to add if I wanted to use the thumbnail slider and make those thumbnails match the original aspect ratio as well?

3

This worked great. Thanks for all your help!