Archived topic
WooCommerce Checkout – Stripe Payment Gateway
5 replies · Started by pairfum on August 2, 2018
Dear Tom,
On mobiles (narrow screens), I notice in the Stripe payment gateway that the fields for ‘expiry date’ and the ‘card code (CVC)’ are not aligned:
https://staging.pairfum.com/checkout/
The solution on mobiles (narrow screens) seems to work better:
https://www.pairfum.com/checkout/
Would have a solution how GP could be adjusted?
Many thanks for your help.
Kind regards,
Pairfum
Hi there,
Those are actually coming from WooCommerce Gateway Stripe directly so I would recommend checking with their support to see what the best solution is.
Let me know if this helps :)
Hi Leo,
Many thanks for your reply.
Yes, I thought as well that it should be WooCommerce that offer a solution.
However, the misalignment seems to come from GeneratePress as the fields work without a problem with the BeaverBuilder Theme, i.e. our live site: https://www.pairfum.com/checkout/.
I will also put the question to WooCommerce though.
Kind regards,
Pairfum
I'm not seeing a line of CSS from GP there.
You could give this a shot though:
.woocommerce-checkout #payment div.payment_box {
padding: 0;
}Hi Leo,
We fixed the misalignment with the following code:
/* WooCommerce Checkout - Stripe Payment Gateway CC Input Field Width Adjustment on Mobile */
@media only screen and (max-width: 430px) {
.woocommerce-page form #wc-stripe-cc-form .form-row-first, .woocommerce-page form #wc-stripe-cc-form .form-row-last {
width: 100%;
overflow: visible;
}
}
Do you have any comments or suggestions for this code?
With kind regards,
Pairfum
https://www.pairfum.com
Looks good to me :)
Glad you figured out!
