Mobile Version not adjusting well.

  • Profile Image
    traveldiunsa
    Asked on July 11, 2016 at 02:49 PM

    Hello, I have this form in
    http://mundojovenhonduras.com/index.php/isic/solicitud-carnet-isic

    In mobile version via browser does not display correctly, I have the "make this form responsive" selected in Designer options.

    I think this is also causing the Google re.captcha images (when it requieres them) to not display correctly, onlye partialy.

    ¿What can I do to solve it?

    Thanks for the help

  • Profile Image
    BJoanna
    Answered on July 11, 2016 at 04:01 PM

    I was able to replicate mentioned issue. Also when I tested your standalone form I noticed that images from Image Checkboxes widget are cut off. 

    Please add Mobile Responsive widget to your form to see if that will resolve your issue. 

    Also add this CSS code to make Image Checkboxes widget responsive on small devices: 

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

    iframe#customFieldFrame_32 {

        height: 500px!important;

    }

    }}

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

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

    Here is my demo form: https://form.jotform.com/61926617951969 

    Feel free to clone it

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

  • Profile Image
    traveldiunsa
    Answered on July 12, 2016 at 12:23 AM

    Thanks for the help, I applied the setups and also clone your form but it keep showing wrong on website. In url shows well, but no on website, I only insert the script

    http://mundojovenhonduras.com/index.php/isic/solicitud-carnet-isic

  • Profile Image
    Chriistian
    Answered on July 12, 2016 at 02:14 AM

    Can you please try embedding the form to your webpage using the iFrame embed code to see if that resolves the issue? 

    If the issue still persists, you may also try injecting the custom css code below to your form:

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

    .form-all {

        width: 235px !important;

    }

    }

    Please do let us know if you need further assistance.
    Regards.