Embedded form is not responsive

  • Profile Image
    Alyahya_Seeta
    Asked on August 09, 2020 at 02:41 PM

    Hello,

    The form sizing is fitting perfectly on a computer screen, but is too big for the phone.

    Is there a way to simultaneously have two sizes one for the laptop website and one for the phone?

    Thank you,

  • Profile Image
    Jimmy_D
    Answered on August 09, 2020 at 04:01 PM

    Hi!

    Kindly embed the following CSS code to your form to fix the issue. 

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

     iframe#{

      min-width: 400px !important;

      width: 400px !important;

     }

    }

    Try this and let us know should the problem persists. 

    Regards,

  • Profile Image
    Alyahya_Seeta
    Answered on August 09, 2020 at 04:46 PM

    I embedded this to the previous code:

    <iframe style="width:1250px;height:1250px;border:none" src="https://form.jotform.com/202205770960451" scrolling="no">This browser does not support Iframe</iframe>

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

     iframe#{

      min-width: 400px !important;

      width: 400px !important;

     }

    }

    But it doesn't work.

  • Profile Image
    jonathan
    Answered on August 09, 2020 at 05:28 PM

    We apologize for inconvenience. But it seems there is confusion on the instruction.

    You actually need to add the CSS codes provided by our colleague to the custom CSS codes of the form itself.

    1597008352zzz 2020-08-10 05.21.29.png


    Please do this and afterward you will need to re-embed the form on your website using its iframe embed code.

    User guide: Getting the Form iFrame Code

    Let us know if you need further assistance.



  • Profile Image
    Alyahya_Seeta
    Answered on August 09, 2020 at 06:12 PM

    It doesn't work.

  • Profile Image
    jonathan
    Answered on August 09, 2020 at 07:19 PM

    Please use the proper iframe embed code of the form and re-embed the form in your website.

    Follow the steps on the user guide : Getting the Form iFrame Code

    I did checked on your website and I see the form was using a modified iframe embed code. I suggest you try first using the intended iframe embed code of the form.

    Let us know how it goes.



  • Profile Image
    Seeta Alyahya 
    Answered on August 09, 2020 at 07:23 PM

    Hello, I’m using a modified version of the iFrame code that your support team provided me because the normal iFrame, JavaScript, and source code all weren’t working.


  • Profile Image
    Vick_W
    Answered on August 09, 2020 at 11:01 PM

    Hi there,

    I'm looking into this for you and will get back to you shortly.

    Thanks.

  • Profile Image
    Vick_W
    Answered on August 09, 2020 at 11:37 PM

    Thanks for the wait.

    Please replace the Iframe code that you already have on your website with the following iframe code:

    <iframe style="width: 100%;height: 650px;border:none;" src="https://form.jotform.com/202205770960451" scrolling="no">This browser does not support Iframe</iframe>

    I've already tested on your website using browser inspect element option and it is working properly on available mobile devices as well. 

    Let us know if you need further assistance.

    Thanks.

  • Profile Image
    Alyahya_Seeta
    Answered on August 10, 2020 at 12:05 PM

    Great! It worked thank you.