Text formatting changed on iPhone device

When users are taking my survey it shows up poorly and is hard to read.

See images below.

Hi nikki145,

Thank you for reaching out to Jotform Support. I cloned and tested your form to replicate the issue but the form is working fine on iPhone as it should. Check out the screenshot below:

In the screenshot above, I tested it on an iPhone 15 with iOS 17 on a Safari browser. To narrow down the issue, may I know what iPhone version you encountered the issue with? In the meantime I cleared the form cache to fix related cache issue.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

it’s still happening on my phone. just tested again. here is another screen shot.

I am on an iphone 15 pro max, ios 17.5.1

i also had it happen to a user I sent this to and they had the same issue. not sure what phone they have.

thanks so much!

Hi Nikki,

I cloned your form and tested it to see if I could replicate the issue, and I ran into the same problem. This can be fixed by adding custom CSS to your form. Check out the steps below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*Fix the field alignment - 16542591*/

.form-line[data-type="control_radio"], 

.form-line[data-type="control_checkbox"] {

    display: flex !important;

    flex-direction: column !important;

}

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

in addition to what’s already there or in place of?

and if in addition, before or after what’s already there?

thanks!!!

Hi Nikki,

Can you explain a bit more about the issue, so I can get a better idea of what's happening? I have cleared your form caches as a precaution, please test it again after clearing your browser cache. Also test it on a different browser or a device to see if the issue persists and if the issue persists we'll do a more in-depth investigation and work on finding a solution.

Once we hear back from you, we'll be able to move forward with a solution.

where do I put the code you gave me? in place of the other code or with the other code ?

Hi Nikki,

You need to inject the custom CSS codes into your form's CSS code injector. Let me show you how to do it:

1. Copy the CSS codes below:

/*Fix the field alignment - 16542591*/

.form-line[data-type="control_radio"], 

.form-line[data-type="control_checkbox"] {

   display: flex !important;

   flex-direction: column !important;

}

2. In Form Builder, click on blue roller paint icon.

3. Then click on Styles.

4. And paste the custom CSS codes in the text field area.

That's it. Give it a try and let us know how it goes.