Make Fields Responsive in Mobile View

Good morning.

I'm wondering if if there is a way for the forms to be responsible.

For example, the full name element has two fields on the same line. On a desktop, having two field on the same line is ideal since there is enough space, but on a mobile phone, I would prefer having one field on the top of each other.

Do you have an option somewere to allow that ?

Hi David,

Thanks for reaching out to Jotform Support. Let's inject a Custom CSS code into your form and resize the certain fields in mobile view. Let me show you how:

1. Copy the CSS code below:

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

.fixed-width .form-dropdown, .fixed-width .form-textarea, .fixed-width .form-textbox {

min-width: 100% !important;

}

.form-line-column {

min-width: 100% !important;

}

li[data-type=control_fullname] [data-wrapper-react=true] .form-sub-label-container {

flex: none !important;

width: 100% !important;

}

li.form-line:not(.form-line-column)[data-type=control_fullname] .form-input-wide [data-wrapper-react]:not(.extended) .form-sub-label-container+.form-sub-label-container {

margin-left: 0px !important;

}

#id_3 {

padding-right: 4px !important;

}

#last_3 {

margin-top: 10px !important;

}

}

2 . Choose the Paint Roller icon located in the top-right corner of the Form Builder.

3 . Navigate to Styles at the top of the Form Designer window on the right.

4 . Under Inject Custom CSS, enter your code; all modifications are automatically saved.

Give it a try and let us know if you need any help.

Hello.

Thank you for your help.

It's working for this specific object in this specific configuration. However, If I add Prefix, Middle Name and Suffix, it doesn't align well.

The CSS is also very specific to the full name section but , for example, doesn't apply to the address one.

I was wondering it there was a possibility to have the whole form more responsive without having to add specific rules for each single component :)

Hi David,

Jotform Forms are mobile responsive by default. We can try changing the display of the fields to get the fields aligned on top of each other. You can try this CSS code:

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

  li[data-type="control_fullname"] [data-wrapper-react="true"] .form-sub-label-container {

    flex: inherit;

    width: 100%;

    display: contents;

  }

}

Check out this screenshot of my test:

Give it at try and let us know if this works for you.