Making text area full screen on mobile

  • Profile Image
    plott
    Asked 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!

  • Profile Image
    EltonCris
    Answered 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
    plott
    Answered 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
    Sven
    Answered 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
    plott
    Answered on April 05, 2017 at 08:12 AM

    Perfect - thank you!