How to create a gap between payment icons on mobile view?

Store Design
1

Hi,

Please can someone assist me.

I have added payment icons to my product pages.

When viewing on mobile, there is a second row for 1 icon and there is no gap between the Visa icon and the Klarna icon (see screenshot below). I would like to create a small gap between the Visa icon and the Klarna icon.

Thanks in advance.

www.electricrideco.com

IMG_9803.PNG
IMG_9803.PNG1125×2436 354 KB

2

@guyv

Please follow up below steps. May this help you.

  1. Go to online store > themes > actions > edit code
  2. Find Assets > theme.css and paste below CSS at the bottom of the file
.payment-icons li
{
margin-right:0px!important ;
}
1 Like
3

Hi @guyv ,

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:
.list--inline li{
  margin-right: 0px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

1 Like
4

@DelightCart

Thanks for your input. This changed the margin of the payment icons in my footer but not the payment icons on my product page as shown in the screenshot.

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
ul.payment-icons li.payment-icon {
margin-bottom: 5px;
}
1 Like
6

@AvadaCommerce

Thanks for your input! This worked well as the payment icons are all in one row when viewed on mobile. However it makes the payment icons in my footer very close together.

Is there a way to apply your code to only the payment icons on my product page and not the payment icons in the footer?

7

@ZestardTech

Thanks a lot for your solution!

Is there a way that I can apply this only to the payment icons on my product page and not to the payment icons in my footer?

1 Like
8

Hello there,

This one css only for product page.

1 Like