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

  • Profile Image
    rheersink
    Asked on October 23, 2019 at 04: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

  • Profile Image
    Jed_C
    Answered on October 23, 2019 at 04:26 AM

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

    ex.

    1571819007The Easiest Online Form Builde

    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.

  • Profile Image
    rheersink
    Answered on October 23, 2019 at 08: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;

        }


    }


  • Profile Image
    Richie_P
    Answered on October 23, 2019 at 08: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.

  • Profile Image
    rheersink
    Answered on October 23, 2019 at 08: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;

        }


    }