Mobile font size fix…

Hi there. I have an answer to a question I have not seen a satisfactory answer to yet. How do I increase the font size on mobile devices? Many answers seem to amount to “you can’t”, “it’s hard-wired somewhere” and similar. The answer lies in the themes/tempera/styles/style-mobile.css file but DO NOT modify this file or changes may be lost when your theme is upgraded.

Instead, add the following code to your child theme “style.css” if you use one, or to the “Custom CSS” field in Tempera settings though I have not tried the second method I see no reason why it would not work.

/* Increase font size on mobiles */

@media (max-width: 650px) {
	body, #content, #content p, #content ul, #content ol,#content code, #content pre, #content blockquote {
		font-size: 16px !important;}
		
@media (max-width: 480px) {
	body, #content, #content p, #content ul, #content ol,#content code, #content pre, #content blockquote {
		font-size: 16px !important;}

	#site-title span a {font-size: 24px !important; line-height: 28px !important;}
	#site-description {font-size: 14px !important; line-height: 16px !important;}

Change the font sizes to your own preference, I found the ones here quite satisfactory for my site. IMPORTANT! It is important to add the ” !important” just before each semi-colon (;) or your important changes will likely not take effect… 🙂

Enjoy!

• This topic was modified 8 years ago by davesmith1au. Reason: spelling fix