Need to make my form mobile responsive.

  • Profile Image
    67PallMall
    Asked on November 04, 2021 at 05:56 AM

    Hello Jot Form support team,

    My form https://form.jotform.com/212823942649059 is currently not responsive when looking at on a mobile and I hope you can help me!

    Thanks,

    E

  • Profile Image
    Rehan_F
    Answered on November 04, 2021 at 07:24 AM

    Greetings,

    I've checked your form on the Mobile preview and it seems to be showing correctly.

    1636024943_6183c26f470cc_

    You can check it in a different browser if it is still not showing correctly on your end.

    Should you need further assistance then please let us know.

    Thanks

  • Profile Image
    67PallMall
    Answered on November 04, 2021 at 07:28 AM

    Hello Rehan,

    Thank you for your message. Yes, I've managed to fix this but not all of the form is responsive - did you scroll through?


    E

  • Profile Image
    Jovanne_A
    Answered on November 04, 2021 at 08:13 AM

    Hi,

    Are you perhaps referring to the "Button Checkboxes" widget?

    If so, please allow me some time to check on this and I will get back to you as soon as I have more information.

    Thank you!

  • Profile Image
    Jovanne_A
    Answered on November 04, 2021 at 08:25 AM

    Hi,

    Please try adding this custom CSS code to the widget's CSS code section:

    @media only screen and (max-width: 480px){
     div#checkbox-container {
      overflow: scroll;
    }
    }


    1636028652_6183d0ecaee14_

    Please give it a try and let us know how it goes.

  • Profile Image
    67PallMall
    Answered on November 04, 2021 at 01:14 PM

    Hello Jovanne,

    Thank you for your help with the button check boxes i've added this to the CSS. I was looking more generally, for example there's an overlay of text when you move down in the Biography section. Some of the products overlap etc.

    thanks,

    E

  • Profile Image
    67PallMall
    Answered on November 04, 2021 at 01:15 PM

    1636046151_61841547d6593_jot form bi.PNG

  • Profile Image
    Jovanne_A
    Answered on November 04, 2021 at 04:49 PM

    Hi,

    Please allow me some time to check on this and I will get back to you as soon as I have more information.

    Thank you.

  • Profile Image
    Jovanne_A
    Answered on November 04, 2021 at 05:07 PM

    Hi,

    It appears that you have declared a CSS code that greatly affects the layout of your form in mobile view. Can you please try removing the height property in #id_39?

    See the image attached:

    1636060009_61844b69c0c61_

    From my mobile view, it will look like this:

    1636060039_61844b87a0950_

    Please give it a try and let us know if you need further assistance.

    Thank you.