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

    How to set form font size differently based on devices

    Asked by kmonastyrsky on November 02, 2016 at 02:37 AM

    Hi,

    In this URL https://www.gutsense.org/contact/customer-service.html I have used JotForm.

    I have set different font sizes depends upon the devices (tablet, mobile, PC). 

    Is it possible to set the font size inside JotForm as in the website. I know that the html elements inside iframe will not be changed.

    Please let me know if there is a way.

    Thank you.

    Page URL:
    https://www.gutsense.org/contact/customer-service.html

    size font size font same
  • Profile Image
    JotForm Support

    Answered by emily on November 02, 2016 at 04:11 AM

    I checked the URL you have provided. The font size of the website, except your form inside, is 21px. To make the font size of your form 21px, kindly inject CSS codes below.

    @media{

        .form-all{

            font-size:21px;

        }

    }

    Here is the guide that shows how to inject custom CSS codes. 

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    After adding the codes, kindly check your website again. If any problem occurs, please contact us again.

     

    Thanks.

  • Profile Image

    Answered by kmonastyrsky on November 02, 2016 at 05:37 AM

    Hi Emily,

    Thank you for your answer.

    The font size of the website in PC is 21px, if you check in tablet and mobile. The font size varies. So I will not set the font size as 21px as you suggested.

    As the JotForm is in iframe, the website css will not change the font size inside iframe. Is it possible to embed the form without iframe?

    Please let me know.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by candy on November 02, 2016 at 09:15 AM

    Hello,

    I've checked your form. You can choose "Make your form responsive" option from the Advance Designer of the Form Builder as the following screenshots:

     

     

    As the form is responsive now, I injected the following CSS codes into your form to appear larger in PC, tablet, and mobile devices:

     

    .form-line{  /*pc*/

        font-size: 21px;

    }

     

    .form-sub-label{

            font-size: 21px;

    }

     

    @media only screen and (max-device-width: 768px){ /*tablet*/

    .form-line{

        font-size: 21px;

    }

     

    .form-sub-label{

            font-size: 21px;

    }

    }

    @media only screen and (max-device-width: 500px){ /*mobile*/

    .form-line{

        font-size: 21px;

    }

     

    .form-sub-label{

            font-size: 21px;

    }

     

     

    }

    Please check it again and If you need any further assistance, do not hesitate to contact.

    Thanks.

  • Profile Image

    Answered by kmonastyrsky on November 02, 2016 at 09:21 AM

    Hi candy,

    Thank you for your answer.

    It solves the problem.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by candy on November 02, 2016 at 09:29 AM

    We are happy that your problem is solved.

    Have a good day!