What Manon and Greyelf said are true.
What Harlowe provides in the header, <meta content="width=device-width, initial-scale=1" name="viewport">
, is important for any CSS to render properly on mobile.
That said, in Harlowe (by default), story prose is very large on mobile.
What I use in Story → # Stylesheet is…
:root {
font-size: 24px;
}
tw-story {
font-size: 1rem;
}
@media screen and (max-width: 600px), screen and (max-height: 600px) and (orientation:landscape) {
:root {
font-size: 16px;
}
}
Harlowe uses font-size: 1.5em
and we override it with 1rem
. However, by default most devices use a font-size of 16px so with 1.5em, that equals 24px. 24px tall lettering on mobile is very large so we set the default size to 16px for mobile, but leave it at 24px for desktop and tablets. With mobile phones (that I know of), the screen size is under 600px wide in portrait orientation. However, we also have to compensate for landscape mode with mobile so the part where we change the root font size to 16px is a little complicated.
The benefit of changing the root font size and using rem units is that, if you use rem for most everything (like padding, margins, header sizes, etc.) changing the root font size will scale everything in proportion. You don’t have to change multiple styles; just the root font size. The only things I wouldn’t use rem for are borders, lines, shadow offsets, etc. Use px for that finely tuned stuff.
I recommend using rem units instead of em. Unfortunately, there are cases where em will compound its size. So if you have a <div>
with 2em and then another <div>
with 2em inside it, the inner one will be 4em. Use rem and things will always be based on the root font size regardless of nesting multiple styled tags. Many web developers don’t know this about em. Using em will work fine most of the time, but when it doesn’t, it’s just plain annoying.
For example, in the passage I can write…
<div>TESTING<div>TESTING</div>TESTING</div>
…and the CSS can look like…
div { font-size: 2em; }
…and the result will look like…
…not what most would expect, I would say.
Anyway, let us know if that works for you and good luck on your project!