Mobile Widget Doesn't Work to Make My Form Responsive

  • Profile Image
    royallyfunparties
    Asked on February 10, 2016 at 08:15 AM

    When i go to the form on my iphone, it isn't optimizing it for mobile use. It did at one time, but now it's not. Maybe I need to delete the widget and re-add it?

  • Profile Image
    Kevin_G
    Answered on February 10, 2016 at 10:55 AM

    I checked your website and the form is being properly displayed in mobile devices, however, you may also try injecting this CSS code:

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

     

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    Hope this helps.

  • Profile Image
    royallyfunparties
    Answered on February 11, 2016 at 08:46 AM
    New response receivedThat made it worse.
    I did go in and expand all my fields so that they’ll be one under the other, and not try to go side-by-side and that helped a little. But the problems I’m having are:
    The background color changes in Mobile to an ugly yellow.
    The font for the labels is too big
    The text doesn’t wrap to the screen size, so you have to scroll over to read the whole label
    Melissa
    817-729-7016
    www.royallyfunparties.com
    www.facebook.com/royallyfunparties
    ...
  • Profile Image
    mert
    Answered on February 11, 2016 at 11:10 AM

    Hi Melissa,

    Actually, I didn't replicate the same issue with you on iPhone 5s. Please, see it from the below:

     

    However, I suggest you to use only one predefined option at the same time, so if you use the widget, please disable the "Responsive Form" option; because their CSS codes could be create conflict when tow of them or three of them are opened. However, my suggestion is enable "Responsive Form" option and delete the widget. Also, we can provide you a extra CSS code, if those options won't fix the problem.

    In addition, you can find the useful guide from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    Please, don't forget to let us know the results.

    Thanks.

  • Profile Image
    royallyfunparties
    Answered on February 11, 2016 at 11:46 AM
    Oh! Ok. I don't really know what responsive form means so I didn't know to
    turn that off. I'll try it again.
    Thanks!
    ...
  • Profile Image
    mert
    Answered on February 11, 2016 at 12:04 PM

    Hi again,

    Its description is explained on the link which I gave it on my previous post. However, you need to follow the steps from the below to turn it off:

     

    But I suggest you to enable this option and remove the widget.