How to set different font size on pc and mobile device?

  • rheersink
    Asked on October 23, 2019 at 4:15 AM

    i built this form: https://form.jotformeu.com/92943469995379

    how can i specify a different font size for mobile and pc browser?  Ideally, I want font size 16 on pc, but font size 12 on mobile when the form is used as part of my web page - www.godandwork.org/creation-actions 

    I already inserted CSS for auto-resizing of the form itself, now just need to set right font sizes

    Thanks

  • Jed_C
    Replied on October 23, 2019 at 4:26 AM

    On PC view, you can just change the font size in form style settings.

    ex.

    1571819007The Easiest Online Form Builde Screenshot 10

    On mobile view, you can inject the CSS code below to change the font size when it detects the viewport size of mobile browsers.

    ex.

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

    .form-all {

        font-size: 12px !important;

    }

    }

    Please try that and let us know if you have any questions.

  • rheersink
    Replied on October 23, 2019 at 8:30 AM

    not working!

    i get smaller text on mobile web page view when i change the font size to say 8 or 10px in the form builder, but not when i change it in the CSS

    here's a copy of the CSS I am using:


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

        th.form-matrix-column-headers {

            width : auto !important;

            min-width : auto !important;

            font-size: 8x !important;

        }


        .form-matrix-row-headers {

            min-width : 50px !important;

            font-size: 8x !important;

        }


    }


  • Richie JotForm Support
    Replied on October 23, 2019 at 8:43 AM

    You may add this inside your mobile CSS

    .form-matrix-row-headers {
       
        font-size: 12px !important;
    }
    th.form-matrix-column-headers {
      
        font-size: 12px !important;
    }

    Please give it a try and let us know if you need further assistance.

  • rheersink
    Replied on October 23, 2019 at 8:57 AM

    that worked - here is my final set of CSS - THANKS!!



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

        th.form-matrix-column-headers {

            width : auto !important;

            min-width : auto !important;

        }


    .form-matrix-row-headers {

       

        font-size: 10px !important;

    }

    th.form-matrix-column-headers {

      

        font-size: 10px !important;

    }


        .form-matrix-row-headers {

            min-width : 50px !important;

        }


    }