Why is my form only responsive for the first page?

  • The_Studio
    Asked on April 21, 2016 at 11:51 AM

    Hi,

    We are building a form with using your website. In our settings we have the form set to be responsive. The first page of the form is perfectly responsive. However, when you click NEXT to go to the next page it somehow loses the responsive adjustments that are applied to the first page. Is there a way we can have our entire form be responsive? 

    Thanks!

    Valerie

  • BJoanna
    Replied on April 21, 2016 at 2:25 PM

    I have tested your form and I saw that only check box options are not responsive.

    Why is my form only responsive for the first page? Image 1 Screenshot 30

    You can make check box options and "Other" text field responsive by Inject this CSS code:

    .form-radio-item label, .form-checkbox-item label {

    display: block !important;

    margin-left: 19px;

    margin-top: -17px;

    }

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

    .form-all {

    width:100% !important

    }

    .form-radio-item label {

    white-space:normal;

    }

    .form-checkbox-item label {

    white-space:normal;

    }

        #input_34, #input_45, #input_39 {

        width:200px!important;

    }

    }

    Inside of this guide you can find how to Inject Custom CSS codes to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    After you add this code your form will look like this. 

    Why is my form only responsive for the first page? Image 2 Screenshot 41

    Here is my cloned form, where I added mentioned CSS code: 

    https://form.jotform.com/61115676017957 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance.