How to change product image dimensions to rectangle in the debut theme?

[kim42]

Hi There!

I'm changing my theme over to the Debut theme and noticed product images display at a  1:1 ratio.  My product images are rectangular (to suit books) so my product images end up looking too narrow and the description text underneath overhangs the photo. 

I was wondering if I can change this in the css or a liquid file so my products displaying on the home page, collection pages and product page also display as a rectangle. 

Thank you in advance

Kim :)

[OTM]

Hi, @kim42 ,

This is Evita from On The Map.

Can you add your store URL?

Best,
Evita

[kim42]

Hi Evita, 
my url is thankubody.com  (but this is my current theme which handles the rectangle images okay)

I'm working on a draft theme (the Debut theme) and am planning on switching over to.

I've added a screenshot that shows how the rectangular images are handled in the Debut theme. 
Kim 

[OTM]

I need to see your draft theme, you will need to add a few codes of CSS, it looks like there's a padding that you need to remove. Do you know how to get a class of the images?

[kim42]

Hi, 

I've deployed the Debut theme now so that you'll be able see the problem.  The product images on the home page, product pages and product collection pages all shrink the rectangle image into a 1:1 ratio leaving blank gaps on each side.  I was hoping I could fix this so that they display as a rectangle and fill the without the side gaps. 

I hope this helps. 

Thanks again

Kim :)

https://thankubody.com

[OTM · Accepted solution]

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

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

[kim42]

Thank you so much!!!

That worked perfectly! Much better. :)

[LUCoutureAG]

Hello everybody!

I had the same problem with the image dimensions in the debut theme. It all worked perfectly, thank you OTM-Team for your help! But my problem is, when I now open the product in the onlinestore there is the same rectangle problem. Is there another code to post into another file in my theme to solve this problem too?

Thank you for your help, really appreciate it!