How can I remove the - and / in the payment form?

  • Profile Image
    rsavoie94
    Asked on December 10, 2015 at 10:09 AM

    I am trying to remove the - and / in the credit card section. On a mobile device these do not line up properly and could be confusing for a customer. I know that I can remove them from the source code, but I need to be able to share the form via a web url so embedding is not an option. Thanks for any help!

  • Profile Image
    Sammy
    Answered on December 10, 2015 at 11:15 AM

    It is not possible to remove the mentioned separators since they are part of the credit card field and do not have CSS classes attached to them.

    You can however re-position the fields so that they appear side by side.

    Use the following CSS to achieve this.

    /**** CC field alignement ***/
    .form-address-table td[colspan="2"] .form-sub-label-container {

        width: 55%;

        margin-right: 0;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container + .form-sub-label-container {

        width: 40%;

        margin-right: 0;

    }

    .cc_number {

        width: 90% !important;

    }

    .cc_exp_month {

        width: 90% !important;

    }

    /*override others*/

    #input_11_cc_exp_month {

        width: 90% !important;

    }

    .form-textbox.cc_number {

        width: 90% !important;

    }

    Insert the code in the CSS tab via the designer.

     

     

    This will be the resulting effect.