Navigation
Archive / Adapting fonts for mobile
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • July 27, 2016 at 8:43 am #1105137
    flacnvinyl
    Participant

    Quick question following with private url

    July 27, 2016 at 8:45 am #1105139
    flacnvinyl
    Participant
    This reply has been marked as private.
    July 27, 2016 at 9:58 am #1105243
    Joao
    Moderator

    Hi Drake,

    You can add a media query like this:

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

h1, .h1 { font-size: 10px !important; }
h2, .h2 { font-size: 10px !important; }
h3, .h3 { font-size: 10px !important; }
h4, .h4 { font-size: 10px !important; }
h5, .h5 { font-size: 10px !important; }

}

    To adjust to other devices you can increse the 480px width to 769px or 979px depending what you want.

    Hope that helps

    Joao

    July 27, 2016 at 12:01 pm #1105470
    flacnvinyl
    Participant
    This reply has been marked as private.
    July 27, 2016 at 12:59 pm #1105578
    Rupok
    Member

    Hi there,

    Sorry for the confusion. Just update the code a bit :

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

h1, .h1 { font-size: 10px !important; }
h2, .h2 { font-size: 10px !important; }
h3, .h3 { font-size: 10px !important; }
h4, .h4 { font-size: 10px !important; }
h5, .h5 { font-size: 10px !important; }

}

    Hope this helps.

    July 27, 2016 at 1:14 pm #1105598
    flacnvinyl
    Participant

    Perfect! Thank you! Makes complete sense. We altered to trigger only what needed, but will keep this as a reference point going forward. Thank you!

    July 27, 2016 at 1:47 pm #1105675
    Joao
    Moderator

    Hi Drake,

    Glad to hear it,

    Joao

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1105137 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>