How to reduce the size of the payment icons?

  • Resolved cam5atl

    (@cam5atl)


    4 years, 1 month ago

    Hello,

    Love your plugin! Can you share custom coding for a layperson to reduce the size of the credit card icons on the checkout page? They overlap each other on your standard form.

    Thanks in advance.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cam5atl,

    You would need to share your website because the CSS depends on your theme. It sounds like your theme is overriding the plugin’s styling so I would need to see what selectors your theme is using.

    Kind Regards,

    Thread Starter cam5atl

    (@cam5atl)

    No problem…

    • This reply was modified 4 years, 1 month ago by cam5atl.
    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cam5atl,

    Here is the CSS you can add to make the icons smaller:

    ul li.payment_method_stripe_cc .wc-stripe-card-icons-container img.wc-stripe-card-icon{
    width: 36px;
}

    You can adjust 36px to whatever value gives you the results you want.

    Kind Regards,

    Thread Starter cam5atl

    (@cam5atl)

    Thank you! @mrclayton I really appreciate your help.

    Thread Starter cam5atl

    (@cam5atl)

    @mrclayton One more thing please if you don’t mind. That works perfectly for the icons, but as they get smaller (when I adjust the number size), I still need some space between the text credit card and the icons. Is there a way to add that space in between?

    Thank you for your time and help.

    Plugin Author Payment Plugins

    (@mrclayton)

    @cam5atl,

    Try something like:

    label .wc-stripe-card-icons-container{
    margin-left: 30px;
}

    Kind Regards,

    Thread Starter cam5atl

    (@cam5atl)

    Thank you so much! @mrclayton

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to reduce the size of the payment icons?’ is closed to new replies.