How can I adjust the product grid image size in the Dawn theme?

Store Design
1

Hi there!

I’m using the Dawn theme and I have an two issues with the product-grid settings.

  1. If in the product grid settings I choose for ‘adjust to image size’ , some images show extremely large

If I change this to ’ square ( or portret) , part of the larger images is being ‘cut off’.

I would prefer the square or portret-setting, because the shop shows nicely neat and organized, but the complete product image should be shown. How can this be done?

  1. In case I have only few items in a collection, the size of the square framed images is being enlarged. I would like this not to happen. How can this be avoided?

I would be very grateful if someone can help me out with these issues!

Thanks!

Riemer

2 Likes
2

@Riemer

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.

1 Like
3

Dear Ketan Kumar,

Thanks for your reply.

The URL of my web shop is www.dutch-dogs.online

Let me know if you would be able to solve this.

Kind regards,

Riemer

4

Good morning,

Thanks for your reply. It would be great if you cab solve this issue.

Shop URL is: www.dutch-dogs.online

Kind regards,

Riemer

1 Like
5

@Riemer

thanks for quick URL.

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.card__inner .media--transparent {
    background-color: #fff;
}
.card__inner .media--transparent img.motion-reduce {
    object-fit: contain;
}
2 Likes
6

This is amazing!!!

Perfect!

So… how about payment?

Can you assist me further? Got a few other minor issues… :wink:

Riemer

1 Like
7

@Riemer

its my pleasure to help us and work with you please sent DM

8

@Riemer

if you have any queries and issues please feel free to contact me here.
Email: bamaniyaketan.sky@gmail.com
Skype: bamaniya.sky
WhatsApp on:https://wa.me/qr/RFAPN34B3KQCG1

9

I am having the same problem with the product grid size.

If for example 5 items are viable in a collections the first row shows 3 items and the second row two items are bigger then the first row. Or when only 2 items are available in a collection the image size are enlarged.

I would like the gird size always be the samen - 3 product per row with same sizing.

Could you please help me out?

1 Like
10

@Kirstin2

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.

11

Hi Ketan,

The issue about different sizes on different rows is solved! It had something to de with me editing the code since I’m still looking for the solutions about grid sizes to be the same also when there is only 2 items available in a collection (so no enlarging the images)

https://www.joyeriashop.com/collections/kerbholz

The problem is for example with these items.

1 Like
12

@Kirstin2

can you please upload more product so i will check proper

13

You can check the other collections. There are already many products in the webshop.

Or do you mean something else?

1 Like
14

@Kirstin2

yes i have also check other collection but i can’t see any issue please show me

15

the issue is that i would like the precut image size always to have the same grid sizing 4 in a row also when there is only to products available like in the Collection > Kerbholz

It’s not really an issue i just need help to know the code for editing to always have the same grid size (4 in a row)

1 Like
16

@Kirstin2

i can see only 2 product

17

Indeed that is correct in the Kerbholz Collection. But I want those 2 products having the same size image as in the collections where are 4 products in a row..?

1 Like
18

@Kirstin2

yes, please confirm look

https://pasteboard.co/KcoYUZH67ofS.png

19

Happy New Year first of all! And yes this look great as I wanted it.

Please tell me how to adjust in the code?

20

@Kirstin2

Happy New Year

yes, please add 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: 750px) {
#product-grid.grid--2-col-tablet .grid__item {
    width: calc(25% - 1rem / 2);
    max-width: calc(25% - 1rem / 2);
}
}
1 Like