How to make the Form mobile responsive?

  • Profile Image
    murielperez03
    Asked on June 26, 2019 at 11:42 AM

    I'm really tired of figuring this out on my own. Can someone please help me?

    In my form, when someone selects a product to order, there are four fields to fill up that will appear.

    Without the mobile responsiveness widget, the second field is visually cut, while the third and fourth are no where to be seen on a mobile screen.

    With the mobile responsiveness widget, the second field is visually whole, while the third and fourth are still no where to be seen on a mobile screen. This is so even when i try to scroll right.

    https://form.jotform.me/91622788526467

    P.S. i can't figure out how to get the preview before submission working right. The submit button gets in the way visually of the edit button. I've been trying to figure this out for weeks. Please help.



    This is a re-post of a comment on Deprecated: How to Make the Form Responsive Using the Form Designer Tool

  • Profile Image
    roneet
    Answered on June 26, 2019 at 01:48 PM

    On testing the Form I noticed it requires some CSS injection to make it mobile responsive. Please allow me some time to test and get back to you.

    Thanks.

  • Profile Image
    roneet
    Answered on June 26, 2019 at 03:30 PM

    There are lots of CSS code which is causing conflict with the elements in the field. I tried to remove some and make it best fit on mobile screens.

     

    1561577117save.JPG

    I have also fixed the review order widget to made it mobile responsive.

    1561577245save.JPG

     

    Removed some CSS and added the below code:

    #input_75{

      height: 50px;

    }

    Please refer to the cloned form and make changes to your form accordingly https://form.jotform.com/91765973621972 

    Let us know if you need more assistance. 

    Thanks!