payment setup and credit card field alignments

  • Profile Image
    kathystockwell3
    Asked on June 04, 2020 at 01:42 PM

    I've created a payment form but the space is too small to read what's supposed to go into each space ie. CVV code etc

    I just want to make a smaller space for their name and more space to read what goes int o each block

    Screenshot
  • Profile Image
    FelipeSantana
    Answered on June 04, 2020 at 05:21 PM

    Hello @kathystockwell3,

    Our apologies for the inconvenience that you are experiencing.

    After testing your form on my mobile device I was able to replicate the issue that you are mentioning. It seems that the CC detail fields are very short compared to the name fields and the 'Submit' button looks to be too large for the page.

    I have taken a close look at your form and I can see that you have injected custom CSS into the form to edit the style. I see that you are attempting to add media queries to adjust the mobile responsiveness of your form, however, it seems that there are many empty queries in your CSS. It is possible that your form is not being styled correctly because you have added your CSS outside the scope of the media query.

    Here is a screencast to demonstrate what I mean.

    1591304927Screenshot (219).png

    As you can see here, there are two out of very many closed media queries with CSS in between them that is out of the scope. You can fix this issue by simply moving the closing bracket in the media query to under the code that you want to apply.

    However, if you want to simply fix the size of the name, CC details and button size, then I do recommend that you copy and paste the following CSS into your form.

    @media only screen and (max-width: 690px) {

    .form-submit-button{

        width: 250px !important;

    }

    .form-textbox.cc_firstName, .form-textbox.cc_lastName, .square-hosted-fields{

        height: 25px !important;

    }

    }

    Please do let us know if the code works or if you require any further assistance with the CSS of your form. We look forward to your response.

  • Profile Image
    kathystockwell3
    Answered on June 04, 2020 at 06:28 PM
    I’m a massage therapist. Not an engineer.
    None of what you said to me makes sense.
    Perhaps you can dumb it down a bit given
    I’m paying for your services. I’m using your
    site because I do not have the technical
    skill to do it on my own.
    Kathy Stockwell LMT, CEAS1, AOEAS
    ...
  • Profile Image
    JohnRex
    Answered on June 04, 2020 at 10:35 PM

    Hello Kathy - You can copy the code below and paste it here:

    15913244502368660.png

    GUIDEAdding-Custom-CSS-in-JotForm 

    @media only screen and (max-width: 480px) {

    .form-submit-button{

        width: 250px !important;

    }

    .form-textbox.cc_firstName, .form-textbox.cc_lastName, .square-hosted-fields{

        height: 25px !important;

    }

    }