How to adjust the mobile form width?

Hi, another question: When I paste the form in the desktop version it looks fine, but when I do it in the mobile version, because it is fitted into a margin it looks very narrow and the calendar, for example, breaks. Is there no way to make the form wider so that it fits the entire width of the screen? Thanks.

Hi Mandinga,

Thanks for reaching out to Jotform Support. When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how:

1. First, copy this code:

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

  ul.form-section {

    margin: 0 !important;

    padding: 0 !important;

  }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.

It didn't work for me, the same thing keeps happening.

On the other hand, could this be adjusted that I marked in red?

The surname box should go further to the left and further down.

And could it be made so that there is less margin on the sides with some CSS adjustment? At least only in the mobile version, it is very narrow.

Thanks

Hi Mandinga,

I checked your form and the reason why the code did not work was because it was translated on your form. See the screenshot below:

The correct code should be:

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

  ul.form-section {

    margin: 0 !important;

    padding: 0 !important;

  }

}

Adding this will fix the issue on the Calendar and Input Field. See the screencast below:

Give it a try and let us know how it goes.

Thanks, but it still doesn't work... neither the calendar nor the first and last name setting.

Hi Mandinga,

I checked your form and the code was still translated, you need to paste the code we shared in english as it is without translating it. See the screenshot below:

If you allow us to paste the code in your form we can then help you fix the issue.

Keep us updated and let us know if you need any more help. 

That's true, I thought I had already put it in English and now I see that I haven't, now everything is fixed, thank you very much.

I'll take this opportunity to ask you two questions:

Hi holamandinga,

To avoid confusion, I moved your other questions to new threads and helped you with them below:

• How to remove the Jotform Branding from my forms?
• Are there limits on how many emails we received on free account?

Reach out again if you need any help.