Dawn Theme, how to display all same size collection grid

Shopify Discussion
1

Hi all,

I am currectly facing an issue with the grid, I would like to see all images with the same size (320x212 would be great), how can I change the code?

Website: https://c168e5.myshopify.com/collections/comodas-y-baules

PW: mieneefd

Thanks a lot

2

Hey @danbot There are two solutions for this issue.

  1. You have to upload the same size of images if the theme code is compatible with that then the section will adapt the height of the image.

  2. Otherwise, the other solution is that you have to add the below CSS in the base.css

.card__media .media img {
object-fit: fill;
}

.card .card__inner .card__media {
min-height: 320px;
}

.product-card-wrapper:hover .card–standard .card__inner:after {
height: 320px;
}

.product-card-wrapper .card–standard>.card__content .card__information {
height: 320px;
}

3

Hi @RockTechnolabs

Thanks for the tip, unfortunately images are displaying in the wrong size.

I’ll check how to do it manually.

Thanks

4

Hey, @danbot You can just upload the same size of images, OR else have to check if there is any option in the theme customizer ( Collection page template ) for the image size.

5

What about the aspect ratio? In the template is just square, portrait or adapt to the image. Maybe we can find a solution there :slightly_smiling_face:

6

Hey @danbot With using the square, portrait option the image will crop and adjust on those particular sizes but using the adapt to the image option whatever aspect ratio images you upload code will adapt that size.

So the solution is that you have to upload the same size of images ex: 320x212 for all collection images and choose the option to adapt to the image.
So doing this the box sizes will be the same for all collections.

Let me know if you need more help.