Reduce Product Image In Collection Page - Dawn

[Tara123]

Hi,

For product images in collection page, I want to reduce the image size ( to 80%) and padding (custom top, bottom), for desktop and mobile. Can anyone please advise the code to achieve that? Thanks.

www.veepli.com 

Best Regards,

Tara

[prakashVt]

Hello @Tara123 
Do you want something like this?

[Raj-webdesigner]

1) Edite Code

2) Find base.css

Add This css In your bsase.css File

@media screen and (max-width: 990px){
    .grid--1-col-tablet-down .grid__item {
        width: 45% !important;
        max-width: 50% !important;
    }
}

[Tara123]

Thank you. It does not work though. Anyway, I figured it out myself.

[Raj-webdesigner]

Great Work @Tara123 

[Tara123]

Yes, I found the rule. The issue is that I don't know the exact selector, since I have no coding experience. 

[PageFly-Oliver]

Hi @Tara123 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
#shopify-section-template--22323469222198__featured_collection_MXPYnb .card__inner.ratio{
margin-bottom: -60px;
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly