Make Product Images Smaller On Collection Page - Refresh

Technical Q&A
,
1

Hi,

I have only 3 products. So for mobile, on collection page, I have one product per row, the images look big. Can anyone help advise how to make them smaller just for mobile?

Thank you.

Regards,

Tara

2

Hi Tara123,

Usually, the Code varies for different themes.
But It can be achieved through media Query and CSS.

For Refresh Theme,
In the Customize Section,
Select Collection → Product Grid.
When You click on Product Grid, you will get option for Mobile Layout 1 Column & 2 Column.

Refresh-Mobile Layout.png
Refresh-Mobile Layout.png500×1209 45.8 KB

3

Thanks. But I prefer 1 column. Any code will help this?

4

Please send URL of your store.

I will look into it and suggest code.

5

www.veepli.com. Thank you.

6

I have given margin on both the side.
I have given margin on both the side.563×1001 72.2 KB

is it something you want?

7

Will look good if can make the images smaller, like 80%.

8

Also paste the code here from Harsh Patel. In case anyone is looking for similar solution.

.card__inner.color-background-1.gradient.ratio {
width: 80%;
margin:0px auto;
}