How do you make the font size and menu change according to the screen size?

  • Unknown's avatar
    riversidenaturecenter · Member ·

    When I look at my mobile version of my site, my menu turns into a touch menu, and my font size stays the same size (which is too big for a mobile device.
    So, can I use CSS somehow to control the size of the font so that when people look at it on a mobile device (or from a certain px screen size) the font becomes smaller?
    And secondly, can I get rid of the touch menu so that it stays how it is, or becomes a vertical menu? I would rather have the menu visible on all screen sizes then have it compacted.

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Ok.

    The frontier value is 800px. That means your menu is shown with letters from 801px width navigators and in slimmer browsers windows than those 800px your visitors will see the 3 lines icon.

    Can I use CSS somehow to control the size of the font so that when people look at it on a mobile device (or from a certain px screen size) the font becomes smaller?

    Yes, you can. You should adjust values of your text. This, in fact is quite complex, because you are using several text types H1.entry-title (Welcome to Riverside Nature Center Website!) H4 (Located in Kerrville Texas) H6.article_text (The May 2015 Newsletter has been…) and P (Interesting Events Happening Now!!!). Size values are: H6 font-size is 1.6rem, P font-size is 100%, H4 font-size is 100%, H1.entry-title is 4.5rem
    I would propose you to use less different header types in your content. In any case you can change their size in <800px windows using this CSS Code:

    @media screen and (max-width: 800px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td	{
font-size: 0.8rem !important;
 }
h1.entry-title {
font-size: 2.5rem;
}
}

    I hope this helps you. Enjoy blogging!

  • The topic ‘How do you make the font size and menu change according to the screen size?’ is closed to new replies.