Mobile body font size

• robbie

  said

  Hi Jeffw,

  In what way is it possible to make the body font size (anywhere) larger on mobile screens?
  It’s just a bit too small on my site right now.

  I’d love to hear you,

  Regards, Robert

• jeffw

  said

  You can add some custom CSS to do this, but there’s no easy way to adjust the font sizes in absolutely all the different text areas.

  For example…

  @media screen and (max-width: 767px) {
    body { font-size: 120%; }
  }

  Go to Appearance > Theme Options > Custom CSS and add that CSS to your Custom CSS box. Adjust the font size to suit.

  The media rule ensures that the font size is changed only when the browser width is less than 768px.

  That CSS will increase the size of a lot of text to make it 20% bigger (when the browser width is less than 768px), but it won’t change the size of absolutely all text.

  Depending on exactly what text you want to make bigger, you may need to add more custom CSS that targets specific text.

  If you use Internet Explorer, Chrome, Firefox, Safari or Opera you can use the browser’s built-in developer tools to point at and “inspect” elements on a web page to find out what styles they use. You can even tweak the styles live to experiment with any changes you might fancy.

  References:
  https://www.w3schools.com/css/css_rwd_mediaqueries.asp
  https://www.w3schools.com/cssref/pr_font_font-size.asp