Font size increased but still displays too small in form

I've increased form font size for labels & fields but form labels still display too small on form when viewing in web page on mobile devices. How can I increase label font size to display same as increased field font size?

Hello,

Thank you for reaching out.

We didn't received your screenshot, but from your question, I am guessing the following code should solve your issue (https://www.jotform.com/help/117-how-to-inject-custom-css-codes/):

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

.form-label.form-label-auto {

font-size: 16px;

}

}

You would just have to adjust the 16px until you are satisfied.

Best regards

I injected code is Style section but label fields didn't increase in size.

<form url>

Hi,

Have you tried going to advanced designer?

Here is the instruction.

In your form builder, you should be able to see the icon shown in the screenshot below:

That should open the basic window for the Form Designer Tool

Scroll down and look for Advanced Form Designer Tool.

In the Advanced Designer Tool under the “Design” tab, open the “Font Options” section. From there, you can change the font size of the form.

The Advanced Designer Tool allows you to see the changes in real-time, here’s a screencast showing the changes on my form when editing the font-size.

Make sure to hit the save button in the Advanced Designer Tool to apply the changes.

Hope this helps. Thank you.

Mark

Yes, that's the exact place I increased font size & injected your CSS code & is the exact screenshot I attached to this thread. Font size for labels is still not increasing to match same size as fields.

Hi,

Please remove all the old CSS in the form and inject the following:

.form-label.form-label-auto {

font-size: 26px;

}

The old CSS is only for mobile devices whereas this will work on all devices.

Please let us know if this solved the problem.

Hope to hear from you soon.

Removed & added new CSS, logged out, cleared web browser history/cache, logged back in & still not working. Now when I try to log in, it shows error that I've reached login attempts & to try again in few hours!

Still not working for all areas. Not updating font size of widget. The font size updates for label & form fields in Form Builder but on web page where form is embedded, font size still small & not updated to 26px for any areas.

Screenshot of webpage where form is embedded

Hi,

Sorry for the confusion, I did not realize that the whole form should have a font size of 26px, I will provide a solution in a few moments.

Thank you for your pasients.

Hi again,

In the above screenshot you sent you missed the first period of the code this is why it is not working as expected, please rectify the mistake and everything should go back to normal.

.form-label.form-label-auto {

font-size: 26px;

}



For the widgets that were highlighted, you would need to add the following CSS into the widget itself. This counts for all configurable list widgets on your form and you would have to add the following CSS into each of them.



This would go under the widget settings where you add custom CSS:


input[type="text"]:focus {

font-size: 26px;

}

input[type="text"] {

font-size: 26px;

}

select.form-dropdown {

   font-size: 26px;

}

th {

   font-size: 26px;

}

button.add {

   font-size: 26px;

}

.stepper-wrap input.stepper {

   font-size: 26px;

   width: 80px;

}

Please let us know if you require any further assistance or if there are any of the fonts still without the 26px setting.

Have an amazing day.

Thank you very much for your help, feedback, & timely responses. Your solutions worked perfectly and solved my initial issue. Your customer service & support is unmatched! A++