Credit card icons too large

  • Resolved consumap

    (@consumap)


    3 years, 2 months ago

    In the checkout after having entered the credit card data the credit card icons are shown way too large (each about 18*11 cm on a 24″ screen!!)

    I read the following thread:

    https://www.ads-software.com/support/topic/how-to-reduce-the-size-of-the-payment-icons/

    It sounds like it should solve my issue, but adding the code to “Additional CCS” in Elementor customizer did not change anything.

    Have I done something wrong or stupid? As it looks horrible, your help is much appreciated. The more fool-proof your answer is, the better ??

    Thanks
    KJ

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

    (@mrclayton)

    Hi @consumap,

    It sounds like your theme’s css is overriding the plugin’s css for the icon size. You will need to provide your website in order for me to see what css is causing the issue.

    Kind Regards,

    Thread Starter consumap

    (@consumap)

    The live shop site is: https://www.consumap.de but here Stripe is not installed yet. We prepare it in the new bilingual staging site, which is not accessible for you. However, the used Phlox theme is the same. Does this allow you to figure out the problem?

    Kind regards

    KJ

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @consumap,

    No that doesn’t help, I would need to see the actual css that is overriding the Stripe plugin’s css.

    Kind Regards,

    Thread Starter consumap

    (@consumap)

    Well get back to you once we have migrated our staging site to the live-site.

    Kind regards

    Thread Starter consumap

    (@consumap)

    We have migrated the staging site and you should be able to access https://www.consumap.de.

    Plugin Author Payment Plugins

    (@mrclayton)

    The icon size is normal on your staging site, I don’t see any issue.

    Kind Regards,

    Thread Starter consumap

    (@consumap)

    I just tried once more, as things may have changed by pushing all shop modifications changes to the LIVE site.

    My findings:

    The icon size is correct where you enter your credit card data.
    However the icons have post card size on the last checkout page. Please try again.

    Plugin Author Payment Plugins

    (@mrclayton)

    However the icons have post card size on the last checkout page.

    Can you elaborate on what you mean by that statement? I don’t understand.

    Thread Starter consumap

    (@consumap)

    The icons are about 10*15cm large on a 24″ monitor at 100%.

    Screenshot download links:
    https://www.dropbox.com/s/pzk2wpke9dp8bgr/Large%20Icons%202.png?dl=0

    https://www.dropbox.com/s/zxwp7zgjn8yzn10/Large%20Icons%201.png?dl=0

    Plugin Author Payment Plugins

    (@mrclayton)

    Do you have some kind of multi-step checkout? I don’t even see that section when I go to the checkout page.

    Is that the order received page? If so, the Stripe plugin doesn’t render icons on that page. Have you customized something?

    Thread Starter consumap

    (@consumap)

    It is a two step checkout using “German Market” from Market press. There is no risk to enter your credit card data in order to get to the second checkout page with the large icons.

    Thread Starter consumap

    (@consumap)

    I wonder why this support case is set to “resolved”?. The problem still exists for us.
    mr.clayton, how can we get this issue fixed? Would be grateful for your help.

    Plugin Author Payment Plugins

    (@mrclayton)

    The page https://www.consumap.de/bestellung_bestaetigen__absenden does not have any icons on it currently.

    That is a custom page, since standard WC is to process the order on the checkout page. Your multi-step plugin is rendering an entirely new page and any icons it renders should be styled accordingly using custom css.

    The Stripe plugin’s css is written to target the icons inside of the WC li.payment_method element. Since your custom 2nd checkout page is using custom html, the Stripe plugin’s css is not targeting it.

    Add something like:

    .wc-stripe-card-icons-container img.wc-stripe-card-icon {
    max-width: 43px;
    max-height: 26px;
    width: 43px;
    height: 26px;
    float: none;
    display: inline;
}
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Credit card icons too large’ is closed to new replies.