How to make Square payment section to fit correctly on my website?

  • Profile Image
    NTXAMP
    Asked on July 23, 2017 at 08:26 AM

    I use square payments and the form doesn't fit on my wordpress sidebar. Some of the form fields hang off of the edge and it looks unprofessional. How can I make it fit? I am not able to change the width of my sidebar on my wordpress site currently, so that is not an option.

    https://www.ntxamp.org/continuing-education/

     

  • Profile Image
    Welvin
    Answered on July 23, 2017 at 12:33 PM

    I've fixed it for you by injecting the following custom CSS codes in the form:

    table.form-address-table.payment-form-table {

        table-layout: fixed !important;

    }

    iframe#square_cc_number {

        width: 93% !important;

    }

    iframe#square_cc_ccv {

        width: 93%;

    }

    iframe#square_cc_exp {

        width: 93% !important;

    }

    iframe#square_cc_postal {

        width: 93% !important;

    }

    To check the custom CSS codes, follow the steps on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes