Stripe credit card fields in woocommerce not showing properly.

Hi there,

Your theme is loading some CSS that impacts the fields display.

You use this to make it better:

. payment_method_stripe .payment_box.payment_method_stripe {
    padding: 0 !important;
}
. payment_method_stripe #top fieldset {
    margin: 0 !important
}

Result: https://d.pr/i/uOfIjN

Hi Remi,

thank you for your solution. Based on your image the css seems to work, but when I look on my mobile, the field is only slightly wider than before.

Before: https://d.pr/free/i/baMSCV
After: https://d.pr/free/i/Megk3n

Please note that I tried it on a Iphone SE and Samsung S7.

It seems the fieldset margin isn’t taken into account or not modified as per my snippet, that’s why:

– https://d.pr/i/USqyeS

How can I resolve this?

I did change the margin under styles (see image), which did affect the width.. although CSS was in place. (see on the left of the image)

– https://d.pr/free/i/OOwsTL

Hi Remi,

Do you have an idea how I could see to it that the fieldset margin is taken into account or does modify as per your snippet? I added your snippet in the CSS..

Hey,

That is weird, as soon as I add it the result is correct:

– https://d.pr/i/vXCtDO

Can you please paste here the exact code you use? It has to be added via the Appearance > Customize > Additional CSS menu item.

I know ?? this is the exact code:

.payment_method_stripe .payment_box.payment_method_stripe {
padding: 0 !important;
}
.payment_method_stripe #top fieldset {
margin: 0 !important
}

Howdy,

Seems like the fields are now aligned correctly. This is what I see: https://d.pr/i/ZU4teG

Is this still a problem?

Kind regards,

Hi Con,

the alignment on a desktop was luckily never an issue. the issue is only visible on a mobile. As far as I can see on my mobile the problem is still not solved.

Hey Stephan,

What if you use:

#wc-stripe-cc-form {
    margin: 0 !important;
}

that seems to work, thanks

Hey,

Excellent, thanks for the heads-up, I’ll mark this as resolved then – Have a lovely day ?? – take care!

Thanks for the help!