Скачать или смотреть *FIXED* Stripe Credit Card Number Overlapping Issue on Mobile with Wordpress & Woocommerce 🎉

Below is the CSS fix for Stripe's inline credit card field text overlapping issue on Wordpress/Woocommrece that happens on mobile devices.

The Fix ##
1. Place this CSS code in either a child theme's style.css file or in Wordpress's Customizer Addition CSS field. I placed it in my child theme's style.css file.
2. Clear all cache (WordPress cache plugins, and your phone's browser cache). And, refresh the browser.

/* fix stripe cc/expiry/cvc field overlap on mobile */

@media only screen and (max-width: 375px) {
#add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods {padding: 0 !important} /* remove padding from inner white field */

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {padding: 0 !important;width:100%} /* remove padding and increase width to 100% of the white field */

#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {display:none} /* this is to hide the top gray triangle arrow that points up */

#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {text-align:center !important} /* align the credit card label */

.wc-stripe-card-icons-container, .wc-stripe-paymentRequest-icons-container{float:none !important; display:block !important} /* remove float and change layout to block */

}

Info ##

I'm using the Stripe for Woocommerce plugin by Payment Plugins.

But this is not an issue specific to this plugin but more so with Stripe's inline form not being overly mobile-friendly out of the box.

Stripe's inline form has the credit card number, expiration date and cvc code all in one field so to speak.

The problem is, that when entered, the credit card number overlaps the expiration date and cvc code entry areas, which could make it hard for customers to enter the correct data and may be unnerving for them as well.

The fix is a bit of CSS that I placed in my child theme's style.css file. It uses a media query to target screens 375px and lower. The CSS removes padding from the inner and outer divs related to the stripe inline form as well as a few layout styles to clean it up a little bit. I believe the divs targeted in the CSS are Woocommerce-specific vs theme or Stripe-specific, so hopefully, it works for you all. If not, simply use Chrome's Inspect Tool to see what divs need to be targeted and change them out in the CSS code at the top of the description.