WooCommerce Stripe card icons now full width after updating 2

[glassballoon]

Hi,

I’ve updated all of a website on a staging site before updating live, the WooCommerce Strip card icons are now full width instead of small, I raised a previous ticket about this and the screenshots to show this are on the previous ticket:

WooCommerce Stripe card icons now full width after updating

Hi, I’ve updated all of a webiste on a staging site before updating live, the WooCommerce Strip card icons are now full width instead of small like before Before: [image] Now: [image] Any ideas? Let me know if you need access to the staging site Thanks

All of the theme/plugins were up to date like you asked but I was waiting for the new release to go in so I could check it against that one. I don’t have any caching on.

I think it’s an Icon stack.

I’ll attach details of the site and sign in to this post via a secure note.

Many Thanks

[ruenel]

Hello Rowena,

Thanks for writing in!

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

To get your issue resolved, please go to X > Theme Options > CSS and insert the following CSS code:

ul.wc_payment_methods.payment_methods.methods img {
    max-width: 50px;
    margin-right: 5px;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

[glassballoon]

Hi Ruenel,

Thanks for that but it was working fine and finding the correct selector 2 releases ago so I think it’s a bug that was introduced from that release.

The selector and css it is applying is in the old code is:

#add_payment_method #payment ul.payment_methods li img.stripe-icon, .woocommerce-checkout #payment ul.payment_methods li img.stripe-icon {
max-width: 40px;
padding-left: 3px;
margin: 0;
}

For some reason it’s not picking that up now in the release 2 cycles ago (when this first started happening).

Thanks

[glassballoon]

I’m going to override the css by using the below into X > Theme Options > CSS, I’m popping it here in case anyone else needs the fix:

/* bug fix for stripe icons being too large */
ul.wc_payment_methods.payment_methods.methods img {
max-width: 40px;
padding-left: 3px;
margin: 0;
}

[prakash_s]

Hello Rowena,

Glad that your able the find the correct selector for the CSS class and you were able to fix the issue by yourself. Thank you for sharing the information. Please feel free to reach us if you have any more concern regarding our theme and theme settings.

Have a great day!
Thanks