Please help make the collection product images correct height

I made a collection on shopify using products i imported from printful. This is how it looks as a default.

The images are all set to a height of 20px.

store url: https://241c3b.myshopify.com/collections/hoodies-sweatshirts

Hi @Gudmundur

This is unexpected but I’ve got a solution for you.

Paste this css at bottom in the base.css under assets folder.

@media screen and (max-width: 480px){
body .card--media .card__inner .card__content {
	position: relative;
	padding: calc(var(--image-padding) + 9.5rem);
}
}
@media screen and (min-width: 481px) and (max-width: 767px){
body .card--media .card__inner .card__content {
	position: relative;
	padding: calc(var(--image-padding) + 11.5rem);
}
}
@media screen and (min-width: 768px) and (max-width: 991px){
body .card--media .card__inner .card__content {
	position: relative;
	padding: calc(var(--image-padding) + 16.5rem);
}
}
@media screen and (min-width: 992px) {
body .card--media .card__inner .card__content {
	position: relative;
	padding: calc(var(--image-padding) + 13.5rem);
}
}

So, it’ll appear for mobile like below:

For tablet devices:

For desktops and laptop:

Thanks

Sheesh B

Hello sheesh_b,

Thank you so much for this solution, it has fixed the problem and the images all look correct now. :heart:

1 Like