How to enlarge body font size for mobile version of Notable Blogger theme

I just was stuck with that problem: tiny font size on mobile version of Notable Blogger theme.

Small size problem

Notable theme, presented by Google back in 2017 in the series of modern Blogger themes, is incredibly good for reading. The best for reading among the other themes in the pack. And I really like it, thinking of no other one for this literary blog of mine.

However, by default Notable's mobile version decreases the font size of body text to just 14px. So insane in the world of Medium's 19px, right? Really hard to read.

I searched for some solutions and tried to apply CSS code they offered - but it didn't work for my Notable theme.

So, I researched a bit more and went in depth with original Notable code. Finally, I came to the right solution, understanding that Notable's CSS class for mobile is not .mobile but @media rule.

CSS code to add

To change the body font size for small screen Notable, you need to add the following code:

@media (max-width:968px){
   .post-body{
      font-size: 20px !important;
   }
}

You can put any font size you like instead of 20px, which is default for desktop version.

Where to add?

Here's the step-by-step instruction.

First of all, go to your Blogger panel.

Then:

1. Go to Template ("Тема" in Ukrainian version)
2. Click Customize ("Налаштувати" in Ukrainian)
3. Then switch to Advanced tab.
4. Scroll to bottom - choose Add CSS.
5. Paste the code I offer above.
6. Save ("Apply to Blog").

You are done!

Now everything works just as planned!