How can I make the edges of my SVG payment icons transparent?

Store Design
1

Good evening,

I wanted to make a shadow around my payment icons, but as I try it with a CSS box-shadow command the edges of the SVG are not transparent.

Bildschirmfoto 2022-01-24 um 10.28.01.png
Bildschirmfoto 2022-01-24 um 10.28.01.png2258×542 28.7 KB

My Shop: wamula.de

As you see the edges are looking it, I would like to disappear the edges.

Please help me.

2

Hi @Shockpain21 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
#shopify-section-footer .HorizontalList__Item svg{
    box-shadow: 0px 0px 5px #000;
    border-radius: 3px;
}

I hope it would help you.

1 Like
3

Hey @AvadaCommerce ,

it does work! But unfortunately only for PC but not for the mobile users :confused:

Sincerely

4

@Shockpain21

Please put this CSS to your css file

#shopify-section-footer .HorizontalList__Item svg{
    box-shadow: 0px 0px 5px #000 !important;
    border-radius: 3px !important;
}

Thank You!

1 Like
5

Hey, unfortunately it does not work for mobile users :confused:

Sincerely Edgar.