Form is not mobile responsive

  • Profile Image
    tester2017
    Asked on June 15, 2017 at 01:41 AM

    Hi,

     

    I'm trying to make my form mobile responsive, however I can't seem to find the tick box in the designer to make the form responsive.

     

    Please help!

     

    Thank you,

    Debbie

  • Profile Image
    WilliamR
    Answered on June 15, 2017 at 01:51 AM

    By default, the forms supports mobile device browsers. If this is not the case on your end, the please try adding a Mobile Responsive Widget on your form and see it helps?

    Let us know if you need further assistance.

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 04:25 AM

    Thanks for your reply.

    my form is embedded on a webpage and it is no mobile responsive.

    Thanks,

    Debbie

  • Profile Image
    Jan
    Answered on June 15, 2017 at 04:55 AM

    May I know what form are you referring to? I checked the stand-alone version of your forms and I can see that they are mobile responsive.

    Please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.

    If the issue persists, let us know. Also, please provide the URL of your web page where the form is embedded so that we can further check.

    Thank you.

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 09:25 AM

    I wonder if it could be because of the CSS code that is preventing the forms to be mobile responsive?

     

    Also, here's the url to the webpage:

    https://www.uwcsea.edu.sg/Impact-of-Giving-Gala

    It's under the "Buy Tickets" and "VIP Table" tabs.

  • Profile Image
    BDAVID
    Answered on June 15, 2017 at 11:39 AM

    Try injecting the following CSS code to make it mobile responsive:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown {

        width: 100% !important;

    }

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    BDAVID
    Answered on June 15, 2017 at 11:42 AM

    Inject the code as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 11:48 AM

    Hi there,

     

    Thanks for that. It looked like it worked great, however the credit card payment is still chopped off on the mobile device.

    Debbie

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 11:51 AM

     

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 11:56 AM

    As soon as I click on the Credit Card payment option, the form suddenly loses its mobile responsiveness.

    Thank you for your time.

    Debbie

  • Profile Image
    BDAVID
    Answered on June 15, 2017 at 01:43 PM

    After further testing, I figured out the that the problem is caused due to an injected CSS code, please remove the following code from your form:

    #cid_24 label.form-sub-label:nth-child(2) {

    width : 593px !important;

    }

    Example:

    Let us know if you need more help.

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 08:22 PM

    The reason why I included that code is because of the line, which is now next to "SGD". I wanted the line to be below the "Gala-Table" text box. Is there no other way of formatting the line or just remove it completely?

    Thanks,

    Debbie

  • Profile Image
    BDAVID
    Answered on June 15, 2017 at 09:58 PM

    Use this code instead:

    #cid_24 hr{

    width : 100% !important;

    }

    Let us know if you need more help.

  • Profile Image
    tester2017
    Answered on June 15, 2017 at 10:39 PM

    Perfect! Thank you so much for your prompt assistance!