Solved

Decrease the image size on collection pages Dawn Theme

TMSmaldon
Tourist
7 1 9

I would like to decrease the size of images in the collection pages.

 

Also, I have a collection with only one item and the image is huge (much bigger images than the other collection pages that have 20+ items). I am not talking about the image size on the actual product pages (I have dealt with that) .

 

Please see pics - see how massive the image is for the gift card (the gift card is a normal product not the Shopify built in gift card)

 

Also the actual size of the image that has been uploaded on the gift card page is only about 200px x 200px so it has been stretched substantially (I zoomed out of the page to 50% so you could see how big it is in relation to the whole page)

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@TMSmaldon 

yes please try this code

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

@media screen and (min-width: 990px) {
#product-grid .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}

 

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

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11972

@TMSmaldon 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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
TMSmaldon
Tourist
7 1 9

Hi Ketan,

 

the URL is:

 

https://tmsmaldon.myshopify.com/

 

password: iafish

 

The main issue it the 'gift voucher' picture on the gift voucher page, but I would also like the pictures on the 'take away' page which is all the other products to be made a bit smaller.

 

Thanks for your help.

KetanKumar
Shopify Partner
36839 3635 11972

@TMSmaldon 

can you pleas confirm this look fine?

KetanKumar_0-1644586442213.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
TMSmaldon
Tourist
7 1 9

Hi,

 

Yes that would be better, how do you do it?

 

Thanks

 

Kind regards

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@TMSmaldon 

yes please try this code

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

@media screen and (min-width: 990px) {
#product-grid .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}

 

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
TMSmaldon
Tourist
7 1 9

Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@TMSmaldon 

its my pleasure to help us 

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
AndreAJMC
Visitor
1 0 0

Your solution is great, Sir, thank you.

 

However if there is only 1 product in the collection or if 1 product is not in the same row as the other products, the isolated picture will look huge

 

Screenshot 2022-06-18 at 10.22.47.jpg

 

sobaker98
Tourist
10 0 1

I was searching for a solution to this and your response finally helped. However, i am currently only selling one product and when i implemented this code it took it off center. Can you help me add something to center it?? Thank you!

sobaker98
Tourist
10 0 1

@Kani any help would be greatly appreciated. https://sobaker.com/collections/all

velorantis
Visitor
3 0 0

Hi, how can I make it for collection list? If i will have only one collection on page, the image is huge. I have to insert minimum two collections so it would look normal. Thanks.

velorantis
Visitor
3 0 0

For anyone having this issue for list of collection when there is one collection on the page in the DAWN theme, change this part of code in section-collection-list.css like this:

 

line 27

.collection-list__item:only-child {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}