Fix field width when view on mobile device - the fields get longer

I added CSS to center all fields on my form and they look great on a PC but on a cellphone, all the "text" fields that I use for category headers are stretched. How to fix this so on a smartphone it looks like a pc?

Hi,

For some reason I can not clone your jotform so I will try to explain what I would try to do here instead.

I would like to try to change one CSS line of code. Since I can not clone it I can not tell you where exactly it is, so what I will do is give you the CSS code that you should add at the bottom of the field for injected CSS. It should go under everything there (just in case).

.form-all
{
  width: 650px !important;
}

In case that does not work then try doing this instead:
@media screen and (max-device-width: 700px)
{
  .form-all
  {
    width: 650px !important;
  }
}

You can see here how to inject your CSS How to Inject Custom CSS Codes

Do let me know if that resolves your issue.

Best Regards,
Ben

I am sorry, I tried but both of these mess up the form more.

Hi,

Hm, they were working good for me when I applied them directly on the page.

Can you please try and remove the mobile responsive widget from the jotform and then add the CSS code?

The code is actually already added in the jotform, we are just making it more important.

Do let me know if that works for you.

Best Regards,
Ben

I don't have a mobile responsive widget on this form.

Hi,

OK, would you please try adding it and then see if there is the same issue with the layout?

Best Regards,
Ben

I'm sorry, I actually DID have the mobile widget. Removing it solved the problem. Thank you!!

Hello ztwersky,

I am glad to know that your issue is resolved.

Do get back to us if you have any questions.

Thank you!