Mobile Font Size

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?

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.

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




@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));
    }
}

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