How can I make my forms fit on mobile devices?

Hello -

 

There are a few forms I created that currently don't fit on mobile devices (phones) hence, people can't input anything if they're using a phone. Any advice on how to size it for mobile devices while keeping a good quality size for desktops?


Thank you,

Felipe

You may try adding the mobile responsive widget to your form: https://widgets.jotform.com/widget/mobile_responsive 

How-to-Add-a-Widget-to-your-Form

If the form still does not fit on mobile devices, then you could try injecting this CSS code to your form as well: 

 

.form-line.form-line-column {

width: 100% !important;

margin-left:0;

}

 

.form-line{

width: 100%;    

}

 

.form-textarea,

.form-textbox,

.form-dropdown{

width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

.form-label-left, .form-label-right{

width: auto !important;

}

 

.form-buttons-wrapper{

margin-left:0 !important;

}

 

.form-input {

width: 100% !important;

}

 

.form-all{

width: 75% !important;

}

 

.form-sub-label-container {

width: 100% !important;

display: block  !important;

}

How-to-Inject-Custom-CSS-Codes

Hope this helps. 

Hello, 

I inserted the code to the css area and clicked on the "get now" button for the widget. It hasn't affected the view on my mobile device but maybe it takes some time. Please help.

Thanks!!

Hi,

This is because you have this CSS code in your form that states that the form should have a width of 980px, which is why in mobile devices it exceeds the screen size:

 

You can delete that specific code.

I also suggest that you look for this specific code:

.form-all {

width: 75% !important;

}

 

And change the width to 100%. See if that works for you. 

Let us know if that helps. 

Ok. I think it kinda worked. Thank you.