Debut: align custom payment icon

Aighard
Excursionist
35 0 4

Hello, i'd like to align custom "Bizum" payment icon and center the block in both, desktop and mobile. Any idea? https://aighard.com
Here's the code i added to footer.liquid (Blue bold font):

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
<div class="grid__item site-footer__payment-icons">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{% assign enabled_payment_types = 'paypal,visa,american_express,master,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
<li>

<img src="https://cdn.shopify.com/s/files/1/0252/3122/8977/t/94/assets/Bizum.png?v=1636457700"/>

</li>
</ul>
</div>
{%- endif -%}
{%- endcapture -%}

Screenshot_2021-11-09-13-20-06-47.jpg

 

Replies 7 (7)

Zworthkey
Shopify Partner
5581 642 1565

hii, @Aighard 
Do you want to like this?
download (39).png
Thank You.

Zworthkey
Shopify Partner
5581 642 1565
.list--inline>li {
    display: inline-block;
    margin-left: 10px !important;
    margin-bottom: 0;
    vertical-align: middle;
}

@Aighard 
Add this code in theme.css or theme.scss

Aighard
Excursionist
35 0 4

Thanks a lot for your time, but it isn't working.

dmwwebartisan
Shopify Partner
12280 2546 3693

@Aighard 

Please try this code

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
<div class="grid__item site-footer__payment-icons">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{% assign enabled_payment_types = 'paypal,visa,american_express,master,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
<li class="payment-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon--full-color">
<image xlink:href="data:;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAWCAIAAADIEsJXAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAUUSURBVEjHpZZZbFRlFMe/aTsswSBbLRENWKgbUWSRlmGTTROIMWjgBU00GsTEGB980BeNIfHB4INEfdH4YOKLTyxBgUI77cydO3fft6EUWrojdGbaKjN3Fv/fnZK2tg2N3pzcfPd8997fOec73zkfWb16ddXxz5o0B9KoOfsMb4vqhBgRMi8hhRMSifO1nLrX8CLBO9Nlu+buMVJLkwqJ8ZVPZhRQwCI1hw9FNHeb5uC+z0zt1L1FLBgCvpxHYcICVt6hubt0t3EW3n4ztUY0AAvPDqsIWKT62Ds7dGeX4eG+QbEWsTIcCgewKkYkjPCCasG5GWFQYup5xYJZePmBPLAo7+GkvIJTFydBEiDjtsC5mPCEaOwzvaZZYHB6u+7OT8iVeMyVR+AHJYkAVN2fg2YZp27T3BdVe5s+A4/G3/BgKL4KzwE2waMPCGNARZrQcZwmy1bVaVSdTYrdpM7g3H4jtY4um1AzN9gUHmnnG0TNGhvbrbuklQX4ScncrNp/Ffx4OlvHqY1TYXsMb5NqV9I4/F94rewuzS6XyxHDJWcvQwMweD/1D53s7ntKMlfxeh2vreQ13OH3etmiZjHifASjJUHauHmcQhflaoJcYfBIBYOrDF1aVp7GiyY3qxZ43/cPnXA73k3dXCeZ+OlrVmqvQcEnu3tP9w1+2dX76Y1brzsdOzV7t25XxwTIQSu1VbWqoywYb6U6v+jqfVzQVvHq5909b1+7Qdr4UDtfQU7hbVBM8PxioVwuYvD1rb6FCalcLkXT2Uc4dSB3L533xwo+po6krn/V3YMBaU2SaAKDC3eGyfkrvw3dLtOrmCsW8vQ/JTyc+/MuIlEVF//N2xL492FHVzgmtAxnMG4Q9UyhwGZGViQV+LqMle2xsZFigVxq+3lgiPJo3FgAvuu/XRPjofmg4ya5FB0p+IVSkVxqf9O9DuUGlQZ/ejypfx913iIt7De9/RhvVJzBfD6WzmLZSFw61UOVW1STnGk+f2f4XqlU4eVLhVM9g0s5mc5qDjnbnMxmldFRcu7KszL1AQGfwqN1qyWxXaNz7yHil2Pf9g4EPBu8RGYE2fuqfQ2a45g9c5lcbGseziBe5GI7vCmWiz/0Dy1mEfwyigP5vVUZHUGqkz+iqAZUaXhTeMhpWLpJoTwxO/qK4Q37/l0/V8spWIO2dHY5S20vlEpNsnHIcGtj3PsdXdActr03HGrHQTsVvEwH5ELLzXt/9+VyAGPbjPvXkphUX2L8Wsl8WrI+6ewulugiD+d9ZOZDrDyQy/04MFT5LO3nKylw4nonudj663h2lH8ZGCTNsWdkM+vnI7oDt6LpdCKTQRg2qtaI71NlNDnBq+VVuAzfH+P1l3TvmNe5VbXXCHqlHFc6Ub2gP8op9ZJWL2pLOBlZjhCtl7FnTAxCMWEhK9VxCi28jITetCwp1wSlYCWnVqrxBA8kVF4UDnQlrPBa0XhOscCAHlZHdLdeMujuruxiSFwMBdWcKqNJwkjYXlUMihRHuyYqQIwnwZ6bUE7mzbHdVDpiCL9g0BSlJbSlKCFmoqXMtZ7N1m520nbjLEhMar+MWM2IDZKBvrFDp4IcXpIcb5n/ixcJnKPtJjA/8EysigsbFfNlegxwI+PvpJBNy4PiOTfekaMznxIMb3K7qQm8bJCtA2aqaVqvwD0cnAcewDtylOAME/r49PRfoEaTyaemmICuhAMOIjnduD2GW3c/ErMJKGD9A97ZtwP9WKeaAAAAEnRFWHRFWElGOk9yaWVudGF0aW9uADGEWOzvAAAAAElFTkSuQmCC" width="37" height="22" />
</svg>
</li>
</ul>
</div>
{%- endif -%}
{%- endcapture -%}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aighard
Excursionist
35 0 4

Almost there! Thanks. The icon needs to be moved 5 pixels more to the right. BTW where's the image link in case i want to change it? Thanks again.

Aighard
Excursionist
35 0 4

Also, now there are more pixels between american express/mastercard than between the others.

Aighard
Excursionist
35 0 4

This is how it looks with the last code. Any idea how to move it a little bit?


imagen_2021-11-10_131855.png