How can I add a margin to product images in a card?

Store Design
1

Hi guys,

I am adding products to my webshop and encountered an issue. For the product cards, I work with png photos. However, whenever I upload them these photos fill in the whole product card (see photo attached). I would like to add margin around the png photos in order to make them appear smaller on the product card. I couldn’t find the code to be adjusted.

I use the Mode theme.

Thanks in advance.

Regards

Bildschirmfoto 2022-10-14 um 09.28.38.jpg
Bildschirmfoto 2022-10-14 um 09.28.38.jpg652×586 26.1 KB

2

Hi @FF3 ,

Could you share your store URL so I can check and give you a solution?

3

@FF3 - can you please share your page link?

4

Hi Dan_From_Ryviu,

Thanks for your quick response. Our website is not published yet. Unfortunately, I am not allowed to share the URL and password at the moment due to legal reasons.

Is there any chance to solve this issue without access to the whole website? Or can I provide any additional screenshots that make this case clearer?

Thanks

5

Hi Suyash1,

Thanks for your quick response. Our website is not published yet. Unfortunately, I am not allowed to share the URL and password at the moment due to legal reasons.

Is there any chance to solve this issue without access to the whole website? Or can I provide any additional screenshots that make this case clearer?

Thanks

6

@FF3 - can you share preview link then? because code needs to be seen to provide css

7

@suyash1 I quicly changed the website design in order to provide a preview.
You can find the preview here.

Thanks

8

@FF3 - add this css to the very end of styles.css file and check

.template-index .product-list .inline-image__image {width: 90%;    height: 90%;}
9

@suyash1 I added the code and it didn’t have the desired effect. The right and bottom are fine, but the right side and top aren’t. Is there some code that I can add to make the margin appear on all four sides?

thanks

Bildschirmfoto 2022-10-14 um 16.04.22.png
Bildschirmfoto 2022-10-14 um 16.04.22.png1334×618 232 KB

10

@FF3 - try this, adjust numbers as per the need

.template-index .product-list .inline-image__image {width: 90%; height: 90%; left: 50%;
    transform: translate(-50%) !important;    top: 10%;}
11

@suyash1 Fantastic, it worked! Thanks a lot

12

@FF3 - great, do let me know if you ned any thing more, you can message here or have my email below