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

    Making text area full screen on mobile

    Asked by plott on April 04, 2017 at 08:17 PM

    I have a form at:

    https://form.jotformpro.com/70936236920963

    The text areas at the bottom look fine in preview.  However, on my phone (iPhone 6), they are confined to the first column.  How can I make them full-width?

    Thank you!

    Page URL:
    https://form.jotformpro.com/70936236920963

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 05, 2017 at 03:03 AM

    Inject this CSS codes to your form, this should expand the textarea field on mobile.

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

    textarea#input_28, .form-textarea {

    width: 100% !important;

    }

    .form-textarea-limit>span {display: block;}

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know how this goes. Thanks.

  • Profile Image

    Answered by plott on April 05, 2017 at 06:21 AM

    Hi Elton,

    I made the assumption that the code you provided was to replace the original @media code.  I have done this, but the form still renders incorrectly on my iPhone 6.

  • Profile Image

    Answered by Sven on April 05, 2017 at 07:59 AM

    This is because you have enabled the "Shrink" option on the text areas, I have just checked your form and i can see that the text ares are set to shrink. All you need to do is set the shrink option as off, and they will view correctly without any problems.

     


    Please click on the gear icon of your text area to open the PROPERTIES menu, from there, click on ADVANCED, and scroll down to find Shrink, and set it as off.

     

    Thank you

  • Profile Image

    Answered by plott on April 05, 2017 at 08:12 AM

    Perfect - thank you!