Responsive not working

  • traveldiunsa
    Asked on December 2, 2015 at 3:47 PM

    Hello, I have checked the responsive options for my form but it´doeasn work properly, what can it be wrong with my setup?

    Thanks in advance!

    Jotform Thread 716418 Screenshot
  • Mike_G JotForm Support
    Replied on December 2, 2015 at 9:10 PM

    I have cloned your form.

    Then, I applied some changes on the cloned form. I believe that when you make your form alone responsive it should be responsive also when embedded on your website.  Especially when you embed it using the iframe code: Getting-the-Form-iFrame-Code

    First, you need to expand the fields as shown on the image below: 

    Responsive not working Image 1 Screenshot 40

    This, however, will not take much effect on your form.

    Responsive not working Image 2 Screenshot 51

    After expanding the fields on the image, we will add this CSS codes in your form so it will look responsive on your mobile devices.

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

    .form-all,.jotform-form, .form-section.page-section, .supernova{

    background-color: green !important;

    width: 350px !important;

    }

    label.form-sub-label{

    white-space: normal !important;

    }

    .form-checkbox-item{

    width: 175px !important;

    }

    .form-label{

    text-align: left !important;

    }

    #recaptcha_input_28 tr:nth-child(2) td{

    background-color: blue !important;

    position: relative !important;

    display: inline !important;

    }

    }

    Note: The codes above will only take effect if the form is opened in a mobile device.

    Here's how it will look like on a mobile device:

    Responsive not working Image 3 Screenshot 62

    I would like to suggest you clone the form I have used for testing using this guide: How-to-Clone-an-Existing-Form-from-a-URL

    Here's the Form URL of the clone version of your form I have used for testing:

    https://form.jotform.com/53357798371974

    Once you have cloned the form I have used for testing, please try to embed the clone version on your website.

    I hope this helps. Let us know if there is a need for us to clarify any of the instructions above. Thank you.

  • traveldiunsa
    Replied on December 3, 2015 at 1:26 PM

    Hello Mike ¡Thanks for the detailed answer! I just proceed with the instructions, here is the new form:

    https://form.jotform.com/53364754721963

     

    However in the first field this option: 

    Responsive not working Image 1 Screenshot 20

    is like blocked, so I can enter and expand that field. It´s not the first time I get this option like this in other forms, appreciate your help.

  • Mike_G JotForm Support
    Replied on December 3, 2015 at 2:41 PM

    I'm not sure what's blocking the cog-wheel icon for you to change the properties of the field. I have cloned your new form(here's the clone version of it: https://form.jotform.com/53365763088970) and I was able to expand the first field.

     

    Responsive not working Image 1 Screenshot 20

    Let us know if you need any further assistance. Thank you.

  • traveldiunsa
    Replied on December 4, 2015 at 10:40 AM

    Thanks, I proceed to create a new field and delete de first one, but after that the block appeared again. I notice that happens when i have this icon above the field also
    Responsive not working Image 1 Screenshot 20

    Thanks!

  • Mike
    Replied on December 4, 2015 at 11:35 AM

    I have checked the 'Formulario de Pre-Inscripción' form in editor, but everything appears to be working fine.

    Responsive not working Image 1 Screenshot 20

    Is this still happening on your end when you select the first field, or in some other way?

  • traveldiunsa
    Replied on December 4, 2015 at 11:45 AM

    Yes, directly when I enter to the form in my end. Here you can see a demo:

    http://ge.tt/86TUB3T2/v/0?c

    Thanks!

     

  • Mike
    Replied on December 4, 2015 at 12:15 PM

    Thank you for the video, we can see the problem now. We will handle it on a separate thread.

    http://www.jotform.com/answers/718106