Make Product Images Smaller On Collection Page - Refresh

[Tara123]

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

[harshpatel · Accepted solution]

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.

[harshpatel · Accepted solution]

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.

[Tara123]

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

[harshpatel]

Please send URL of your store.

I will look into it and suggest code.

[Tara123]

www.veepli.com. Thank you.

[harshpatel]

is it something you want?

[Tara123]

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

[Tara123 · Accepted solution]

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