5 minute hack to optimize your WordPress blog for mobile accessibility

Hitanshu Gandhi  
Spread the love

TL;DR: For merely scaling font sizes – Use WordPress Admin Theme Editor to change the base html font size in the theme CSS (a website style documentation standard) to your desired size. It may scale other elements as well, which you can then subsequently tweak to arrive at the right proportions for your website.

I am a free user and am therefore limited to the standard 2020 theme. Simple searches for mobile friendly themes are an endless rabbit hole of time. If you are the slightest bit confident, you can make the 2020 theme quickly compliant with mobiles in five minutes. This does not replace ideally buying a perfectly responsive theme but in the absence of great counsel and honest end-user reviews, this will do for me. For now.

This solution is VERY hacky and basically the ONLY way I know.
First I googled, which was academic and with SEO optimized vendor sites, it is a never ending waste of time. DONT.
Then I simply edited the free 2020 theme CSS. How to do that? Easy: Login to your WordPress dashboard. Browse to Appearance and then click on Theme Editor (last link)

Settings used by me.
A. Set the base font size. The easy way is by searching with the keyword 10px. Basically my theme did some scaling down of the base font size from 16px to 10px to enable all font measurements to be easy to compute. I made that 125% from 62.5%

B. This can have unintended consequences since the entire set of elements in the blog is sized relative to the base text size defined above. This made the blog title too large to read, which was annoying. I solved it by editing the relevant CSS. Instead of giving you a standard answer which MAY NOT work for your theme, the better answer is to use FireFox (or Chrome?) Inspect Element. Open the page, right click on the element you want to change and select Inspect Element – the title in my case.

This is a non-standard page title size specification I had created myself.

Note that the location of the active style selected (2442) tells you where to scroll in the Theme Editor. For those unfamiliar with the term rem – 2.4 rem implies 2.4 times size of the root element which is the html font size defined in step A above.

If such a element doesn’t have a font size defined, you can define it right there in the CSS by adding a line just like I did.

You can use this technique for tweaking anything you wish to edit within your theme instead of paying money for themes that are overkill for everyday bloggers like you and me.

Hope this helps. Please feel free to drop in any questions in the comments.