How to align Squre payment CC fields in phone screens?

  • Profile Image
    movz
    Asked on January 19, 2018 at 12:12 PM

    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.


    Screenshot
  • Profile Image
    TREVON
    Answered on January 19, 2018 at 01:50 PM

    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


  • Profile Image
    movz
    Answered on January 19, 2018 at 02:06 PM

    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?

  • Profile Image
    EltonCris
    Answered on January 19, 2018 at 03:16 PM

    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:

  • Profile Image
    movz
    Answered on January 19, 2018 at 03:38 PM

    Many thanks. That's very helpful.