How to align Squre payment CC fields in phone screens?

Can you please implement more flexibility for the credit card fields in the Square payment option?

The current set up is only useable for big screens, not for mobile phone users as some of the input fields are cut off.

I.e. It'd be good to be able to move each field on a new line.

Apologies for the challenges you are facing. You may need to inject css to your form to achieve attaining the correct width for mobile devices.

Kindly try injecting the code below to your form:

.square-hosted-fields {
    width : 100%;
}

.form-textbox.cc_lastName {
    width : 90%;
}

.form-textbox.cc_firstName {
    width : 90%;
}

#square_cc_number {
    width : 90% !important;
}

#square_cc_ccv {
    width : 90% !important;
}

#square_cc_exp {
    width : 90% !important;
}

#square_cc_postal {
    width : 90% !important;
}

Kindly test and feel free to clone the form below:

https://form.jotform.com/80184920140953

Thanks Trevon. Have played around with the widths but the left side of the fields seems to cut into the right side at around 105%.
Is there a way to move each field to a new line as well that would be me much more control?

Please replace the CSS codes with this. This makes the CC fields fully mobile responsive. This also supports all the payment gateway.

.payment-form-table td + td {padding-left: 0;} .form-address-table {width: 100%; max-width: 100% !important; } .payment-form-table, .payment-form-table .form-textbox{max-width:none; } .payment-form-table td:last-child .form-sub-label-container {margin: 0; white-space: normal; } .payment-form-table td .form-sub-label-container {width: 100%; } .payment-form-table .form-textbox, .payment-form-table .form-dropdown {width : 100%; } .payment-form-table tbody > tr:first-child + tr td:first-child span {margin : 0; padding-right : 10px; box-sizing: border-box; -webkit-box-sizing:border-box; } .payment-form-table tbody > tr:first-child + tr td:first-child + td span {margin : 0; padding-left : 10px; box-sizing: border-box; -webkit-box-sizing:border-box; } .payment-form-table tbody > tr:first-child + tr +tr td:first-child span.form-sub-label-container, .payment-form-table tbody > tr:first-child + tr +tr+tr td:first-child span.form-sub-label-container {margin : 0; padding-right : 10px; width: 100% !important; box-sizing: border-box; -webkit-box-sizing:border-box; } .payment-form-table tbody > tr:first-child + tr +tr td:first-child span + span.form-sub-label-container, .payment-form-table tbody > tr:first-child + tr +tr+tr td:first-child span + span.form-sub-label-container{margin : 0; padding-top: 0 !important; padding-right : 0; padding-left : 10px; width: 50% !important; box-sizing: border-box; -webkit-box-sizing:border-box; } .cc_ccv {width : 100% !important; } /*Credit card fix billing- city state, country */ .payment-form-table td[width="50%"]>span:first-child {box-sizing: border-box; padding-right: 10px; } .payment-form-table td[width="50%"] + td >span:first-child {box-sizing: border-box; padding-left: 10px; } .payment-form-table td[width="50%"] + td[width="50%"] >span:first-child {box-sizing: border-box; padding-right: 0; } .hover-product-item:hover {color: inherit; } .form-product-item .form-dropdown {height: auto !important; } /*WorldPay US Fix*/ [data-type="control_worldpayus"] td:last-child .form-sub-label-container {margin-left: 0; } [data-type="control_worldpayus"] td .form-sub-label-container {width: 100%; } /*Fix for braintree cc styling*/ [data-type="control_braintree"] .form-sub-label-container {width: 100% !important; padding: 4px; box-sizing: border-box; } [data-type="control_braintree"] .form-textbox{width: 100%; } .braintree-hosted-fields {width: 100% !important; box-sizing: border-box; min-height: 28px; } /*fix chargify expand*/ [data-type="control_chargify"] .payment-form-table td[width="50%"]>span:first-child {padding-right: 0; } [data-type="control_chargify"] .payment-form-table tr+tr td[width="50%"]:first-child>span:first-child {padding-right: 10px; } /*square payment symmetric*/ .square-hosted-fields {width: 100%; height: 30px; padding: 4px 2px; box-sizing: border-box; } /*fix pagebreak display on form builder*/ #stage .form-all .page-section:first-child .form-pagebreak .form-pagebreak-back-container {display: inline-block !important; } #stage .form-all .form-section:first-child [data-type="control_pagebreak"] .form-pagebreak-next-container {text-align: right; width: 50% !important; } div#stage [data-type="control_pagebreak" ] .form-input {width: 100% !important; }

Result:

Many thanks. That's very helpful.