What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by ztwersky on September 20, 2014 at 05:19 AM

    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?

    Page URL:
    http://www.vinewoodstudios.com/form-events.html

    JotForm field width mobile jotform mobile mobile friendly fix width
  • Profile Image

    Answered by Ben on September 20, 2014 at 10:12 AM

    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

  • Profile Image

    Answered by ztwersky on September 20, 2014 at 12:59 PM

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

  • Profile Image

    Answered by Ben on September 20, 2014 at 04:21 PM

    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

  • Profile Image

    Answered by ztwersky on September 21, 2014 at 07:11 AM

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

  • Profile Image

    Answered by Ben on September 21, 2014 at 12:07 PM

    Hi,

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

    Best Regards,
    Ben

  • Profile Image

    Answered by ztwersky on September 22, 2014 at 12:14 AM

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

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 22, 2014 at 03:52 AM

    Hello ztwersky,

    I am glad to know that your issue is resolved.

    Do get back to us if you have any questions.

    Thank you!