How can we make our form responsive?

I selected 'Make this form responsive' under 'Form Layout' under 'Design' and saved the form but it's still not showing up as responsive on my iPhone. The layout is wonky on mobile.

How can I make the form mobile friendly/responsive? We are needing to send out the form this morning so looking forward to hearing from you.

Thanks,

J.

From what I can see you're having some trouble with your form not displaying very responsive on mobile devices after using the mobile responsiveness option and we do apologize about that.

Unfortunately, some fields don't always work exactly as they should depending on several things so in these cases we have to apply further adjustings using additional injected css to tweak it better.

I've taken a look at your form on my iPhone 6and found it appears to be relatively mobile responsive on my end except for the top and bottom fields which were cut off though I see your screenshot is different.

It seems you are using iOS as well, correct?

Are you still seeing it like that on your end per your screenshot?

May we know what device and iOS Version you are using?

This will help us to figure out how to go about fixing this problem a little more accurately.

Hi Kade,

Thanks for your response. I am still seeing the jotform as per my screenshot. I am using iPhone 6, iOS 10.2.

I'm not familiar with CSS coding so any help you are able to provide to ensure the jotform is optimally viewed on mobile, would be appreciated.

Thanks,

J.

I have tested your form on my Samsung galaxy S4 and I was able to replicate same issue like on screenshot you provided. I also noticed that PDF Embedder widget is not responsive.

Please add Mobile Responsive widget to your form to resolve the issue with PDF Embedder widget.

How to Add a Widget to your Form?

And to resolve issue with Heading image and heading text add this CSS code:

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

img.header-logo-left {

width : 130px !important;

}.header-logo-left {

width : 130px !important;

}}

How to Inject Custom CSS Codes

After you add mentioned code you form should look like this. 

Here is my cloned form: https://www.jotformpro.com/form/70086423453958 

Feel free to test it and clone it. 

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

This worked perfectly! Thanks so much for your help.

Cheers,

Julie

You're welcome.

Feel free to contact us if you have any other questions or issues.