uneven spacing between payment icon footer

Store Design
, , , , ,

Topic summary

Uneven spacing between the last two payment icons in the store’s footer; all other icons have consistent gaps. A contributor suggests the underlying markup was custom-coded and the usual list (

    /
  • ) wrapper was removed, which can disrupt default spacing.

    Proposed fixes (via Theme > Customize > Theme settings > Custom CSS):

    • Selector targeting adjacent SVG payment icons: .list-payment__item + svg.icon.icon–full-color { margin: 0.5rem !important; }
    • Broader selector for SVGs inside the payment list: ul.list.list-payment > svg { margin: 0.5rem; }

    These CSS rules add margin around the SVG icons to restore even spacing. CSS (Cascading Style Sheets) controls presentation; selectors apply styles to specific HTML elements like SVG icons.

    Images are central: one shows the spacing issue, another shows the expected, evenly spaced result. Code snippets are essential to the solution.

    Outcome/Status: Implementation steps provided, but there’s no confirmation from the store owner that the change resolved the issue. Discussion appears open pending feedback.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi all tech experts,

please have look on the screen shot there is some unaligned spacing between last two payment icons.

All other payment icons having some space between them except last two.

how can I solve that?

my store link

SinghSells_0-1734740915978.png
SinghSells_0-1734740915978.png344×163 6.9 KB

2

@SinghSells - it looks like that these icons are custom coded at this place, the list tag around it has been removed

3

Hi @SinghSells

To address the issue, please go to your Theme → Customize → Theme settings → Custom CSS and insert the following custom code:

.list-payment__item + svg.icon.icon--full-color {
    margin: 0.5rem !important;
}

This is the expected result:

LizHoang_0-1734783584660.png
LizHoang_0-1734783584660.png801×273 22.1 KB

I hope my solution is helpful to you.

Liz

4

Hi @SinghSells

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

ul.list.list-payment > svg {
    margin: 0.5rem;
}

image (41).png
image (41).png346×390 26.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.