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

  • Profile Image
    ztwersky
    Asked 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?

  • Profile Image
    Ben
    Answered 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
    ztwersky
    Answered on September 20, 2014 at 12:59 PM

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

  • Profile Image
    Ben
    Answered 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
    ztwersky
    Answered on September 21, 2014 at 07:11 AM

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

  • Profile Image
    Ben
    Answered 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
    ztwersky
    Answered 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
    ashwin_d
    Answered 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!