Centered and Cropped Thumbnails

[Romainp]

Hi,

I'm using the debut theme but i have a problem. How can i edit the thumbnails of the grid to Center and Crop the image of the products to align all the images in the grid. I don't find the line in the css. If you have some code, it will be very usefull!

Thx per advance

[KetanKumar]

@Romainp 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Romainp]

Hi! @KetanKumar 

here my eshop https://romain-peli-photographe.myshopify.com/ and the password is eldeux.

Thx for your help!

[KetanKumar · Accepted solution]

@Romainp 

Thanks for the store URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
height: 100%;
    object-fit: cover;
}

[Romainp]

Wow, thx a lot. It works good for my photos. I have juste an issue with portrait pictures. I screen the issue.

Do you have a tips for that?

[KetanKumar]

@Romainp 

Yes, please share this page url so i will check and provide proper code

[Romainp]

@KetanKumar 

Here the page with all product https://romain-peli-photographe.myshopify.com/collections/all the password is the same: eldeux

[KetanKumar]

@Romainp 

sorry i can't see above code can you please add and let me know 

[Romainp]

Oh sorry, i did't upload the code. It's ok now.

[KetanKumar · Accepted solution]

@Romainp 

no, the rush can you please add this code

.grid-view-item__image-wrapper {
max-width: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100% !important;
    max-height: 100% !important;
}