How to set form font size differently based on devices

  • Profile Image
    kmonastyrsky
    Asked 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.

  • Profile Image
    emily
    Answered 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
    kmonastyrsky
    Answered 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
    candy
    Answered 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
    kmonastyrsky
    Answered on November 02, 2016 at 09:21 AM

    Hi candy,

    Thank you for your answer.

    It solves the problem.

    Thank you.

  • Profile Image
    candy
    Answered on November 02, 2016 at 09:29 AM

    We are happy that your problem is solved.

    Have a good day!