How to increase image grid/ thumbnail size for products? Debut theme

Solved
chicandvintage
Excursionist
38 0 17

Hello,

  I was wondering if anyone can please help me change the size on grid view. Images go smaller if I choose  4 products in a line. I'm currently still fixing my website. These is how my products appear. Even If I make picture ratios bigger it remains the same size. Is there a code I can use to fix this?

Line of 3

Capture (2).PNG

It gets smaller if I want a line of 4. 

Capture (2).PNG

 

This an example of how I want my images

Capture (3).PNG

 

 

 

KetanKumar
Shopify Partner
20684 2144 7830

@chicandvintage 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
38 0 17

Thank you so much for your reply. 

https://www.chicandvintage.store/

password: treama

 

 

KetanKumar
Shopify Partner
20684 2144 7830

@chicandvintage 

Thanks for it

do you like this?

KetanKumar_0-1610217830623.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
38 0 17

Perfect as long, when the customer clicks the image they can see the whole picture. How can I do this? I appreciate you looking into this. 

KetanKumar
Shopify Partner
20684 2144 7830

This is an accepted solution.

@chicandvintage 

Thanks for confirm 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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

After View

KetanKumar_0-1610224595213.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
38 0 17

Update the code worked! Thank you very much! How do I get the 2 collection images the front page to be smaller only? I'm beyond thankful

KetanKumar
Shopify Partner
20684 2144 7830

@chicandvintage 

Thanks, update.

yes, please give me screenshot so i will give proper code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
38 0 17

Collections on my main page are large 

chicandvintage_1-1610252153928.png

I'd like the length to be a little shorten and a little wider. Not too small, more on the large/medium side. Thank you

 

 

 

 

KetanKumar
Shopify Partner
20684 2144 7830

@chicandvintage 

can you please share a particular page URL?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing