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

    Heading Changes Font Size

    Asked by PiORaRyap on May 01, 2016 at 05:27 PM

    I've discovered that my site will only work properly if NO MOBILE RESPONSIVENESS is employed. 

    That being said,  can you tell me why the "headings" font size on my form start small in portrait, go normal in landscape AND THEN if you tilt the phone back to portrait the font goes normal on my SG4 mobile phone. (I'm assuming it does the same on others)?

    I've been playing around with this form for a while, Do you have suggested form width sizes, image sizes etc.. That I should be using for this form?

    Page URL:
    home.childrenschristianschool.org

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 01, 2016 at 09:46 PM

    I checked the form on an android device but I cannot seem to replicate the issue. The font size of the headings remain the same on portrait or in landscape.

    If you would like to make the header text bigger, then you can inject the custom css below:

    .header-text {

        font-size: 1.2em;

    }

    This css will apply to both on mobile and on desktop view. You can also change the value of the yellow highlighted text depending on your preference.

    If you need further assistance, please let us know.

     

     

     

  • Profile Image

    Answered by PiORaRyap on May 01, 2016 at 10:27 PM

  • Profile Image

    Answered by PiORaRyap on May 01, 2016 at 10:52 PM

    It's not just with headings, I switched the first heading to "text" and I get the same results. It's small, then when tilted landscape and back to portrait the text gets larger (like I Want in the first place)

    You have to go to home.childrenschristian.org to replicate

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 01, 2016 at 11:40 PM

    You can inject the custom css below to set the font-size of the welcome text so that the text will remain large:

    #text_71 p span:first-child {

        font-size: 1.4em!important;

    }

    To inject custom css, simply follow this guide: How to Inject Custom CSS Codes

    I tried to check the form on your URL (home.childrenschristianschool.org) to try and replicate the issue there, unfortunately it appears that the page is unavailable.

    Please let us know if the issue still persists.

  • Profile Image

    Answered by PiORaRyap on May 02, 2016 at 07:22 PM

    Thank you,  that code worked!

    I gave the wrong URL before.  It's home.childrenschristian.org , My apologies. 

    Can you shoot me the code to change the text size, color and make it bold... for all form collapse

    I added code to change the size of the collapse box but it won't go larger height (only thinner) 

    Can you help with that and if so I want to make sure the text stays vertically centered. 

    Thanks!

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 02, 2016 at 09:15 PM

    You can inject the code below to change the text size, make it bold, and color of the text on the form collapse. This code also makes the form collapse larger. You can change the yellow highlighted text to change the form collapse font size and color, then you can change the green highlighted text to change the size of the form collapse:

    .form-collapse-table span {

        font-weight: bold;

        font-size: 1.4em;

        color: blue;

    }

    .form-section-closed {

        overflow: hidden;

        height: 90px!important;

     

    }

     

    .form-collapse-table {

        padding-top: 35px;

     

        padding-bottom: 55px;

    }

    If you need further assistance, please let us know.