Payment icons underneath "buy now button" alligned straight

[WVU]

Dear,

I'd like to allign my payment icons underneath the buy now button on the product page (mobile version) in 1 line.
They are in 2 rows now, see:

I am using this piece of custom liquid to display them.
What code needs to be added in order to display the icons all on the same line instead of 2 (only on mobile).

<style>
.icon-list-custom {
display: flex;flex-wrap: wrap;
list-style: none;justify-content: left;
margin: 7.5rem; gap:10px;
padding: 1px ;margin-top: -1rem; margin-bottom: -1rem;} </style>
<ul class="icon-list-custom" role="list">
{% assign enabled_payment_types = 'ideal,klarna,visa, master, american_express,vvv_giftcard' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li>{{ type | payment_type_svg_tag: class: 'icon-svg' }} </li>
{%- endfor -%}
</ul>


I am using the dawn theme, and web URL: https://utrecht-winkel.nl/

Thanks a lot!

[thescriptflow · Accepted solution]

Hey @WVU there is typo in your code that prevent payment icons to show in one line.
Please remove the margin and remove flex-wrap property in the code.
Here is updated code:

<style>
.icon-list-custom {
 display: flex;
 list-style: none;
 justify-content: left;
 gap:10px;
 padding: 1px;
 margin-top: -1rem;
 margin-bottom: -1rem;
}
 </style>

After Applying this code it look like this:

If you want to make the payment icons in center then Choose this code instead of previous one:

<style>
.icon-list-custom {
 display: flex;
 list-style: none;
 justify-content: left;
 gap:10px;
 padding: 1px;
 margin-top: -1rem;
 margin-bottom: -1rem;
 justify-content: center;
}
 </style>

After that it will look like this:

But when you see it Under 750px Responsiveness then it look like this. The payment icons in center.

If you want to show payment icons in left under 750px width devices then Choose this code instead of all previous one.

<style>
.icon-list-custom {
 display: flex;
 list-style: none;
 justify-content: center;
 gap:10px;
 padding: 1px;
 margin-top: -1rem;
 margin-bottom: -1rem;
}
@media only screen and (max-width: 750px){
.icon-list-custom{
 justify-content: flex-start;
}
}
 </style>

After that it look like under 750px width mean on mobile Devices.

If this was really helpful then prove it by "Like" and "Mark as Solution".
Want to hire me? Details shared in Signature.

[WVU]

Hi Qasim,

That is absolutely awesome, thank you for your quick reply and offered solution!

[thescriptflow]

I am very happy that I could help.

[WVU]

Hi Qasim,

Upon refreshing my product page, it seems like the payment icons are alligned right instead of in the center.
I have used this code:
<style>
.icon-list-custom {
display: flex;
list-style: none;
justify-content: center;
gap:10px;
padding: 1px;
margin-top: -1rem;
margin-bottom: -1rem;
}
@media only screen and (max-width: 750px){
.icon-list-custom{
justify-content: flex-start;
}
}
</style>

Why is it not in the center?

[WVU]

I would like the payment icons to be in the center for both mobile and desktop. 
I appreciate your help. Is it possible to send an updated code? Or am I doing something wrong?
Much appreciated, and thanks in advance!

Desktop view:

[thescriptflow]

Consider Refrsh your Website Again.
If it also look like in right then Open the same URL in "Incognito Mode".
If you seem that it also show payment icons in Right instead of Center then remove the Previous code and paste the following code.

<style>
.icon-list-custom {
display: flex;
list-style: none;
justify-content: center !important;
gap:10px;
padding: 1px;
margin-top: -1rem;
margin-bottom: -1rem;
}
@media only screen and (max-width: 750px){
.icon-list-custom{
justify-content: center !important;
}
}
</style>

After that it look like on Dektop:

And Look like this on Mobile:

[WVU]

Hi Qasim,

Even upon pasting your new code, the icons still show right..

[WVU]

It seems like there is some 'blank' margin next to the buy buttons which don't allow it to allign it properly.
Any way to get rid of this dead space?