Credit card input fields are quite small

Hi @kgas1

You are correct; the credit card form fields are indeed contained within an iframe for security reasons. Because of this, you cannot directly manipulate these fields with CSS from your site. However, did you try to adjust the height of the input fields indirectly? You can apply CSS to the parent element that contains the iframe, something like .woocommerce-checkout #payment div.form-row, ordiv.payment_method_eway div.form-row-wide #eway-secure-card-field.

Direct link: https://gifyu.com/image/SRnEw

Additionally, could you please try temporarily switching your theme to a default WordPress theme like Storefront? This will help us determine if your current theme is influencing the size of the input field or not.

I wish I could help more, but hopefully, this gets you going in the right direction in increasing the tap target size for your mobile users.

Hi Shameem,

I did try to apply CSS to the parent element but unfortunately while it indeed increased the height of the element, it doesn’t actually make the input field any larger.

I tested the website switching to the Storefront theme and the fields look really good with that theme – we are using Divi at our end.

So not too sure what to do from here. ??

Hi @kgas1

It’s great to hear that the fields are displaying well with the Storefront theme, which shows that the issue is specific to the Divi theme.

You may need to check for any overriding styles in the Divi theme that could affect input field size. You can do this by inspecting the element in your browser and checking for any CSS rules that are applied to it.

If you’re still having trouble, I recommend reaching out to Divi’s support team. They are more familiar with their own theme and can provide more accurate guidance.

I hope this helps, and please feel free to reach out if you have any other questions!