Mobile Font Size

Support Themes & Styling
1

When I view my site (using the Grav Blog template and Quark) on an IPhone or other mobile device, the font is very small. How can I easily increase the font size for all elements slightly for mobile devices?

2

It’s all a CSS matter.
You have to go to the custom.css file and set something like this:

    @media screen and (min-width: 480px) {

    html {

    1. font-size: calc(16px + 4 * ((100vw - 480px)/ 800));

    }
}

But a simpler font-size: 16px; it’s effective too I think.
Maybe I’m overlooking on stuff that I consider clear, but if it’s not all clear, ask.

3

If you don’t mind to use a jQuery solution you can try many plugins




4

@dimitrilongo I’m not opposed to a JQuery solution, but I was hoping for a less “involved” solution. Everything I’ve found online needed a manual font size selection for every element and then manual inclusion of the adjustment libraries and functions. I’ll keep it in the back pocket, and thank you for the links.

@zwitterio I knew it’d be CSS but my CSS skills are very basic and media callbacks are beyond me. Working off of what you’ve shared, I’m using the following in my custom.css for now. It may change as I test other devices but for now this seems to work like I want to. Thanks to you both!!

@media (min-width: 350px) {
    html {
        font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
    }
}
5

You’re welcome, I’m happy it worked!
Just like I said, ask when you have some questions.
Now you should select the tick of “solution” near the answer that you think solved your problem to make this thread marked as SOLVED.
Good work!

1 Like
6

There are a couple of ways to do this. We’ll discuss the options below…

*Buy a mobile theme / template
&Using responsive design / media queries (css)
*Design different versions of your website
Which choice you select for your website or blog will depend pretty much on the amount of time you are willing to put into it and what expertise you have (or are willing to gain).

If you have CSS experience and are not afraid to learn a little more about it, you can monitor the readability of your text on any screen size in great detail.

The font size will be specified in the CSS code. If no font size is specified, a default font size normally 16px will be used by the user.