My form fields just changed width to zero

  • Profile Image
    EpicStudio
    Asked on January 16, 2015 at 04:59 PM

    Hi there, thanks for your help.

    I just visited my sie after a while and it seems that the fields changed width. Is there any kind of conflict I can avoid? Since it changed automatically.

     

    Thanks again..!

  • Profile Image
    Mike
    Answered on January 16, 2015 at 06:28 PM

    Unfortunately, there is no way to find out how the fields were changed, but the issue seems to be specific to your form. There are custom styles on your form, you might consider changing them from:

    .form-textbox,
    .form-textarea {
    width:35%;
    }

    to

    .form-textbox,
    .form-textarea {
    width:100%;
    }

    and from

    .form-input,
    .form-input-wide {
    width:20%;
    }

    to

    .form-input,
    .form-input-wide {
    width:100%;
    }

    Result:

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    EpicStudio
    Answered on January 16, 2015 at 06:59 PM

    Thanks. I did it. Much better. Problem solved.

    I'm still looking for a way to make it 2 lines when it becomes mobile-width narrow. Do you have any idea mhow could I make it?

    Thanks again.

  • Profile Image
    abajan
    Answered on January 17, 2015 at 02:37 AM

    Try this:

    1. In the form's injected CSS, change the following rule:

    .form-line {
    padding:0;
    margin: 0 0 15px;
    }

    to

    .form-line {
    padding:0;
    margin: 10px 0 15px;
    }

    and change the following rules (the last ones in the injected CSS)

    #id_1, #id_3 {width:41%;}
    #id_2 {width:18%;}

    to

    #id_1, #id_3 {min-width: 300px;}


    2.
    Close the Preferences popup and then insert the Mobile Responsive widget:

    (Please see this guide)

    When I cloned your jotform and did the foregoing, I got this result. It it closer to what you wanted to achieve?

  • Profile Image
    abajan
    Answered on January 17, 2015 at 02:42 AM

    Make sure the widget is placed after the submit button.