Responsive not working

  • Profile Image
    traveldiunsa
    Asked on December 02, 2015 at 03: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!

  • Profile Image
    Mike_G
    Answered on December 02, 2015 at 09: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: 

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

    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:

    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.

  • Profile Image
    traveldiunsa
    Answered on December 03, 2015 at 01: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: 

    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.

  • Profile Image
    Mike_G
    Answered on December 03, 2015 at 02: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.

     



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

  • Profile Image
    traveldiunsa
    Answered on December 04, 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

    Thanks!

  • Profile Image
    Mike
    Answered on December 04, 2015 at 11:35 AM

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

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

  • Profile Image
    traveldiunsa
    Answered on December 04, 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!

     

  • Profile Image
    Mike
    Answered on December 04, 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