Font size increased but still displays too small in form

  • Profile Image
    devinstclair15
    Asked on November 07, 2021 at 08:36 AM

    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?

    Screenshot
  • Profile Image
    Gaetan_B
    Answered on November 07, 2021 at 08:48 AM

    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

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 09:04 AM

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


    1636293793_6187dca1a3115_Screenshot_2021

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 09:07 AM

    1636294022_6187dd86b530a_Screenshot_2021

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 09:13 AM

    <form url>

  • Profile Image
    Mark_Louis
    Answered on November 07, 2021 at 09:36 AM

    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:

    image-8.png

    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.


    image-11.png

    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.


    image.gif

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

    Hope this helps. Thank you.

    Mark

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 09:39 AM

    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.

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 10:07 AM

    1636297638_6187eba667759_Screenshot_2021

  • Profile Image
    Collin_S
    Answered on November 07, 2021 at 11:04 AM

    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.

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 11:59 AM

    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.


    1636304386_6188060270e66_Screenshot_2021


  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 12:00 PM

    Screenshot of webpage where form is embedded


    1636304534_618806962d3d9_Screenshot_2021


  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 12:20 PM
    • 1636305601_61880ac19bc74_Screenshot_2021
  • Profile Image
    Collin_S
    Answered on November 07, 2021 at 01:54 PM

    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.

  • Profile Image
    Collin_S
    Answered on November 07, 2021 at 02:23 PM

    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;

    }

    1636312575_618825ff0561a_tempsnip1.png

    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.

    1636312926_6188275e02a1c_Capture11.PNG

    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.

  • Profile Image
    devinstclair15
    Answered on November 07, 2021 at 03:20 PM

    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++