CSS Errors on Mobile

Hi @rdbrooks,

In the picture I can see on mobile your theme has padding on the left and right that is squeezing the form.

The Stripe form does its best to be mobile responsive but if it’s shrunk down to a certain width you will get that overlap.

Unfortunately I cannot control that behavior. You may find one of the custom forms like the Bootstrap form more consistent for your theme.

Kind regards,

Hi Mr. Clayton, thats exactly what i did. I removed the padding but couldn’t figure out how to reduce the font size of the card field, but then I switched to the simplified theme and that fixed it ?? thanks for responding though.

Hi @rdbrooks

Thanks for letting me know that one of the custom forms suited your needs. If you like I can show you how to control the font size of the Stripe form using filters provided in the plug-in.

Kind regards

Yes please, that would be appreciated ??

Hi @rdbrooks,

Our API docs are a good resource for how to customize the plugin. Here is a link to the filter you can use to alter the Stripe form:

https://docs.paymentplugins.com/wc-stripe/api/source-class-WC_Payment_Gateway_Stripe_CC.html#92

Example:

add_filter('wc_stripe_cc_element_style', function($style){
    $style['base']['fontSize'] = '16px';
    return $style;
});

Kind Regards,