Hi @oblanco,
That is the Stripe default form and you can’t edit how it responds to small screens. It looks great but has some limitations on mobile screens and themes that don’t provide enough width. That is why we provide several other options via the custom forms. I recommend the Bootstrap form.
The custom forms can be fully customized and come mobile responsive.
Kind Regards,
I reviewed your website and you could change the following css selector of your theme via a media query:
.et-db #et-boc .et-l .et_pb_row.
It currently has width set to 80%. For screens with max-width of 375px you could make it 100% and the Stripe default form will have enough room.
I was having this same issue and figured out a workaround via CSS. I made a quick video outlining the issue and the fixed result of the CSS: https://www.youtube.com/watch?v=_raqY2whGHA
Below is the CSS I used – I believe it is specific to Woocommerce vs the theme or Stripe. I placed it in my child theme style.css file:
/* 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}
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {padding: 0 !important;width:100%}
#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {display:none}
#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}
.wc-stripe-card-icons-container, .wc-stripe-paymentRequest-icons-container{float:none !important; display:block !important}
}
