Form is not Mobile Responsive

  • booker12
    Asked on November 30, 2015 at 2:00 PM

    All of our forms are mobile responsive and working great. However this particular form is not responsive when viewed from a mobile device. Also when I try to get the embed code is incomplete.. Maybe that has something to do with it?

     

    Page it is located at: http://www.curtain-and-divider.com/pvc-strip-curtains/industrial-strip-curtains/strip-curtain-quote-form/

     

     

     

     

    Jotform Thread 714488 Screenshot
  • BJoanna
    Replied on November 30, 2015 at 3:34 PM

    I have tested your form on my Samsung Galaxy S4 and your form is responsive. Only Check Box options are not responsive.

    Form is not Mobile Responsive Image 1 Screenshot 40

    You can make it responsive by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this 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;

    }

    }

    Form is not Mobile Responsive Image 2 Screenshot 51

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

    Form is not Mobile Responsive Image 3 Screenshot 62

    Here is my demo form: https://form.jotform.com/53335646102954? 

    Feel free to clone it.

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