Payment Widget on Mobile

Hello,

I've got a Wix website and I'm embedding my payment-enabled JotForm to accept donations via Stripe.

Everything looks great except I'm having trouble getting the fields in the payment portion of the form to stay within the mobile pixel parameters. 

Screenshot from my phone: https://www.screencast.com/t/7WuN4SCi

All of the other fields however are fitting perfectly. I've tried the mobile widget and it doesn't help. In fact, it worsens the issue.

Is there any way to customize the payment portion of the JotForm to have smaller dimensions, or to stack the payment input fields instead of having them side by side? 

Thanks!

Mel

You may try injecting the following CSS code to your form and see if that helps: 

.payment-form-table tr:nth-child(2) td:nth-child(2) span{

    width: 280%;

}

.payment-form-table tr:nth-child(3) td:nth-child(2) span{

    width: 268%;

}

.payment-form-table tr:nth-child(4) td:nth-child(2) span{

    width: 268%;

}

iframe#square_cc_ccv {

    width: 100%;

}

iframe#square_cc_postal{

    width: 100%; 

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I hope this helps. 

Beautiful! Thank you so much! I couldn't get that exact code to work, but when I changed your % to px and adjusted it a bit, it worked great. 

Thanks again.

Here's what ended up working: 

.payment-form-table tr:nth-child(2) td:nth-child(2) span{

    width: 110px;

}

.payment-form-table tr:nth-child(3) td:nth-child(2) span{

    width: 110px;

}

.payment-form-table tr:nth-child(4) td:nth-child(2) span{

    width: 110px;

}

iframe#square_cc_ccv {

    width: 110px;

}

iframe#square_cc_postal{

    width: 110px; 

}