How to set form font size differently based on devices

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.

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.

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.

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.

Hi candy,

Thank you for your answer.

It solves the problem.

Thank you.

We are happy that your problem is solved.

Have a good day!