making text larger for the mobile version? Harlowe 1.2.4 Twine 2

Question

On a laptop or desktop our twine project looks fine. On the mobile version, the text is too small. I've tried using font-size in the css and that does not help much. How do you change the size for mobile versions? Thanks.

Answer 1

You can use an @media rule to target mobile devices based on screen size. Example: 

@media screen and (max-width: 800px) {
    tw-story {
        font-size: 125%;
    }
}

 

Comments

Harlowe 1.2.4 uses em units to define it's font & line-height sizes, it might be a good idea to use the same units.

Here is a link to information about using media queries in general, and an article (*) that explains about using breakpoints to target different view-port / screen sizes.

(*) The article is about HTML emails but the information in it is relevant for HTML web-pages as well.