Make Product Images Smaller On Collection Page - Refresh

Solved

Make Product Images Smaller On Collection Page - Refresh

Tara123
Explorer
65 3 6

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

Accepted Solutions (2)

harshpatel
Shopify Partner
15 1 3

This is an 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.
Refresh-Mobile Layout.png

Harsh Patel

View solution in original post

Tara123
Explorer
65 3 6

This is an 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;
}

View solution in original post

Replies 7 (7)

harshpatel
Shopify Partner
15 1 3

This is an 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.
Refresh-Mobile Layout.png

Harsh Patel
Tara123
Explorer
65 3 6

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

harshpatel
Shopify Partner
15 1 3

Please send URL of your store.

I will look into it and suggest code.

Harsh Patel
Tara123
Explorer
65 3 6

www.veepli.com. Thank you.

harshpatel
Shopify Partner
15 1 3

PURE-MULBERRY-SILK-SLEEP-MASK-–-Veepli-Sleep.png
is it something you want?

Harsh Patel
Tara123
Explorer
65 3 6

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

Tara123
Explorer
65 3 6

This is an 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;
}