Decrease the image size on collection pages Dawn Theme

Store Design
1

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)

1 Like
2

@TMSmaldon

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

3

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.

1 Like
4

@TMSmaldon

can you pleas confirm this look fine?

KetanKumar_0-1644586442213.png
KetanKumar_0-1644586442213.png1920×1080 174 KB

5

Hi,

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

Thanks

Kind regards

6

@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);
}
}
7

Thank you

8

@TMSmaldon

its my pleasure to help us

9

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
Screenshot 2022-06-18 at 10.22.47.jpg411×537 35.9 KB

10

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!

11

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

12

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.

13

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);
}