Problems getting uniform font sizes on mobile

  • Profile Image
    ronshuller
    Asked on August 26, 2020 at 01:42 PM

    I cannot seem to get this form to have 12 pt fonts for both "all" descriptions and "all" data when viewed for mobile.

    It seems OK when viewed on a desktop.

    Thanks

  • Profile Image
    JohnRex
    Answered on August 26, 2020 at 04:48 PM

    Please inject the following custom CSS code in your form and see if that gives you the desired result on mobile view:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-sub-label, .form-label {

        font-size: 12px !important;

    }

    .form-textbox, .form-textarea, .form-radio-item {

        font-size: 12px !important;

    }

    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes to the form. 

  • Profile Image
    ronshuller
    Answered on August 27, 2020 at 10:28 AM
    Thanks.
    I installed the CSS and it made no change at all.
    I have attached a screen shot.
    Thanks
    ...
  • Profile Image
    BJoanna
    Answered on August 27, 2020 at 12:25 PM

    You said that you want to change the font size to 12 pt and my colleague provided CSS code for 12 px. 

    Please update the CSS code and change px to pt and test the form again.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        .form-sub-label, .form-label {

            font-size : 12pt !important;

        }

        .form-textbox, .form-textarea, .form-radio-item {

            font-size : 12pt !important;

        }

    }

    The form should look like this on mobile devices after you update the CSS code.

    1598545385form.PNG

    Here is my cloned form with updated CSS code - https://form.jotform.com/202395267207961