Checkbox items are displayed in different font sizes when viewed on iPhone devices.

Hello,

When I view my form on a mobile device the text sizes are different, please see screenshot below. How would I fix this?

Could you let us know which mobile device and browser you are using? I have checked in my Android device using Chrome browser, and the text looks the same:

I am using an iPhone and both browsers Chrome and Safari. The screenshot below is from Safari.

It seems that the form is embedded on a website. Am I correct? 

If so, please provide us the URL of the webpage so we could check that too. Also, you can try embedding the form using the iframe embed method. Here's a guide on Getting-the-Form-iFrame-Code.

Hi John,

It is embedded on a website using the iframe. Link is: http://zimmfor.com/norpacsupplierdeclaration.html

Thanks

I was able to reproduce the error on an iPhone emulator:

I figured out that the issue is with the width of the labels, which is not set to 100% for all, because you have injected the following CSS code:

However, this can be fixed by injecting the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

.form-checkbox-item label{

    width: 100% !Important;

}

}

Result:

Let us know if you need more help, we will be glad to assist you.

Thank you. Unfortunately, it only fixed the font issue. See screenshots below.

Apologies but if my understanding is correct, you want the font sizes to be uniform too, am I right?

If so, you can add a code to that CSS provided by my colleague. Please use this one:

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

.form-checkbox-item label{

    width: 100% !Important;

    font-size: 10pt !important;

}

}

You can also change the size based on your preferrence.

But if you're referring to a different concern, please let us know in details.

Hi John,

That seems to have worked. The only thing I noticed was the radial buttons, see screenshot below, not a big deal but is a nice to have. Is there a way to get these to be the same size across the board?

Thanks

Please try adding the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

.form-checkbox{

min-width: 11px !Important;

max-width: 11px !Important;

}

}

Result:

Let us know if you need more help.

This is the code:

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

.form-checkbox{

min-width: 11px !Important;

max-width: 11px !Important;

}

}

Looks good! Thank you.