Payment card icons at checkout are not mobile responsive

  • Resolved jokubas2000k

    (@jokubas2000k)


    4 years ago

    Hi,

    The payment card icons at checkout are not mobile responsive: Screenshot

    I haven’t found any fix for this issue online. In fact, this same issue is even visible in some of the screenshots in the WooCommerce Stripe documentation but it’s not mentioned anywhere.

    Is there a way to fix this?

    The best way to make the icons responsive would probably be to somehow vertically align the icons relative to the “Credit Card” label once they jump to 2 rows.

    Thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @jokubas2000k ,

    That’s a good catch!

    The current structure of the card icons and the label does not allow it to align vertically. You can try to reduce the icon size using this CSS in your Customize > Additional CSS field –

    @media only screen and (max-width: 600px) {
     .woocommerce-checkout #payment ul.payment_methods li img.stripe-icon {
        max-width: 25px
    }
}

    You can also submit this as an issue in this GitHub link – https://github.com/woocommerce/woocommerce-gateway-stripe/issues

    Thank you ??

    Hi there,

    We’ve not heard back from you in a while, so I’m marking this thread as resolved.

    Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

    Thank you ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Payment card icons at checkout are not mobile responsive’ is closed to new replies.