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

0 votes
asked Jan 12 by annelfc (120 points)
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.

1 Answer

0 votes
answered Jan 12 by Chapel (43,170 points)

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%;
    }
}

 

commented Jan 12 by greyelf (76,630 points)

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.

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...