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

    One header is incorrect size when viewing on mobile devices

    Asked by betwrestling on March 28, 2017 at 10:09 PM

    My form has two headers (with subheaders) and are the exact same size. However when viewing on mobile devices they are two different sizes. 

    My website the form is on is http://www.predictwrestling.com/abcd

    Please see the screenshots below to understand what i mean. The first screenshot has the header 'Submit Predictions' with a subheader. The size of the header (and subheader) is different to the header under the 'Contact' tab in screenshot two even though they are both set as exactly the same size.

    I would like the header (and subheader) under the 'Submit' tab to be the same size as the header (and subheader) in the 'Contact' page. Again, its absolutely fine when viewing on computers so i am assuming there is something wrong with the @media screen code.

    Help would be much appreciated thank you!

    Screenshot one: Submit Tab. ('Submit Predictions' header/subheader is INCORRECT size)

     

    Screenshot Two: Contact Tab ('Contact Details' header/subheader is CORRECT size)

    Page URL:
    https://form.jotform.co/70773161313854

  • Profile Image
    JotForm Support

    Answered by Jim_R on March 29, 2017 at 03:45 AM

    That's odd, you don't have any @media queries on your Custom CSS and the Headers are identical. When viewed on the standalone form, regardless on mobile or desktop, they are the same. The difference only happens when viewed from mobile on your website.

    Can you try adding these CSS codes:

    h3.form-header, .form-subHeader {

        font-size: 250%;

    }

    If that won't work, append !important to it:

    h3.form-header, .form-subHeader {

        font-size: 250% !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    Result:

  • Profile Image

    Answered by betwrestling on March 29, 2017 at 04:25 AM

    Thank you for your help however neither code changed anything at all. I have no idea what to do.

  • Profile Image
    JotForm Support

    Answered by Jim_R on March 29, 2017 at 05:21 AM

    I saw the codes on your website but it appears you used 150% instead of 250%.

    Can you try it again and use 250% this time? Thanks 😊

  • Profile Image

    Answered by betwrestling on March 29, 2017 at 05:33 AM

    I changed both codes to 250% and still no change to the 'Submit' header and subheader when viewing on mobile

  • Profile Image

    Answered by Ian on March 29, 2017 at 07:34 AM

    I am sorry but  http://www.predictwrestling.com/abcd is not loading for me and giving me PAGE NOT FOUND error.

    Am I looking at the wrong URL?

  • Profile Image

    Answered by betwrestling on March 29, 2017 at 07:43 AM

    Sorry about that. The URL is now http://www.predictwrestling.com/predict

  • Profile Image
    JotForm Support

    Answered by Welvin on March 29, 2017 at 11:14 AM

    Inject the following custom CSS codes to your form:

    @media only screen and (max-device-width: 767px) {

    .form-header {

        font-size: 16px !important;

    }

    .form-subHeader {

        font-size: 15px !important;

    }

    }

    Adjust the sizing until you'll get the desired result in mobile devices. Note, this will override the size of all the headers and sub-headers in the form.

    Let us know if you need further assistance.