Reducing body font size on mobile only

[ad_1]

This should correct the font size (use anything larger than 16 if you prefer):

@media (max-width: 544px){
h2, .entry-content h2 {
    font-size: 16px !important;
}}

However, your HTML structure is strange. You should consider correcting this instead of applying the above CSS. It’s strange because body text is set as a H2 heading. While it may achieve the effect you want, it’s semantically illogical. The above CSS could also affect other H2 elements on your site that are actually headings and are supposed to be larger.

Semantically, body text should be in <p> tags. But if you did that, the font family becomes a handwriting style which is difficult to read and inappropriate for body text. It’s fine for headings though. You should swap which font families are assigned to body and which are assigned to headings, then replace the H2 tags for p tags. As long as H2 is not used for actual headings, globally changing H2 to p can easily be accomplished with a search and replace plugin.

  • This reply was modified 22 minutes ago by bcworkz. Reason: missing curly braces

That worked perfectly, thank you!

And thank you so much for the information on which tags I have assigned to which fonts. I didn’t realized I’d gotten things backwards and will definitely work on fixing it now that I know what’s up.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer