How do make Text field responsive?

  • beachchurchjax
    Asked on September 28, 2015 at 1:09 PM

    How do i get the HTML header to shrink? when my form is mobile responsive?

  • BJoanna
    Replied on September 28, 2015 at 2:20 PM

    I have inspected your form http://www.jotform.com/form/52357889700162 and I noticed that header (Text) field is not responsive.

    How do make Text field responsive? Image 1 Screenshot 40

    The reason is because you have added width code for each line of text inside of Text field Source code. To make this part of your form responsive replace existing code inside of Source Code of your text field with this code:

    <div id="header" class="headerclass pagemargins" style="background-color: #ffffff;">

    <p><img class="headerimg pngfix" style="padding-right: 15px; margin-left: auto; margin-right: auto;" src="https://jufs.s3.amazonaws.com/14241006654647910" alt="Header Image1" height="95" /></p>

    <div style="text-align: center;"><span class="wordwrap" style="font-size: 24pt;"><span class="pspan trebuchet" style="text-align: center;"><span class="ispan" style="color: #000066; font-weight: bold;">EPWORTH 2015</span></span></span></div>

    <div style="text-align: center;"><span style="font-size: 18pt;">November 13-15</span></div>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;"><span style="font-size: 10pt;">Epworth is our annual fall retreat in St. Simons Island, Georgia. &nbsp;Spend an entire weekend worshiping, studying scriptures, growing in faith and having fun!</span></div>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;"><span style="font-size: 10pt;">Pay by 10/11 - $150. &nbsp;Pay after 10/11 - $175.</span></div>

    <div style="text-align: center;"><span style="font-size: 10pt;">Registration deadline is 10/25.&nbsp;</span></div>

    <div style="text-align: center;">&nbsp;</div>

    <div style="text-align: center;"><span style="font-size: 8pt;">Payments can be made at the Giving Kiosk in the Lobby, online at beachchurchjax.com, or by turning in a check to Alison Garcia.</span></div>

    </div>

    How do make Text field responsive? Image 2 Screenshot 52

    After you change this code your form will look like this.

    How do make Text field responsive? Image 3 Screenshot 63 

    Here is mine cloned form where I changed mentioned code: 

    http://form.jotformpro.com/form/52705346997973? 

    Heel free to clone it.

    Hope this will help. Let us know if you need further assistance.

  • Courtney
    Replied on September 29, 2015 at 10:40 AM

    Thank you so much!!!

  • BJoanna
    Replied on September 29, 2015 at 11:09 AM

    You're welcome.

    Feel free to contact us if you have any other questions.