Heading Changes Font Size

  • PiORaRyap
    Asked on May 1, 2016 at 5: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?

  • Chriistian Jotform Support
    Replied on May 1, 2016 at 9: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.

    Heading Changes Font Size Image 1 Screenshot 30

    Heading Changes Font Size Image 2 Screenshot 41

    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.

     

     

     

  • PiORaRyap
    Replied on May 1, 2016 at 10:27 PM

    Heading Changes Font Size Image 1 Screenshot 20

  • PiORaRyap
    Replied on May 1, 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

  • Chriistian Jotform Support
    Replied on May 1, 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.

    Heading Changes Font Size Image 1 Screenshot 20

    Please let us know if the issue still persists.

  • PiORaRyap
    Replied on May 2, 2016 at 7: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!

     

  • Chriistian Jotform Support
    Replied on May 2, 2016 at 9: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;

    }

    Heading Changes Font Size Image 1 Screenshot 20

    If you need further assistance, please let us know.