Help with font sizes on different device types

Authoring Twine
,
1

I’m trying to make a game that is playable for both pc and mobile, and to compensate for differing screen sizes, I want the default text settings to be as so:

body { 
  background-color: #000000;
  font-family: Calibri;  
  font-size: 150%;
}

I want a different font size for mobile devices, but I’m unsure how to do so. Some help would be great.

2

You can use Media Query rules to achieve that: Responsive Web Design Media Queries

For example, add the following below your existing CSS to make the font smaller if the screen width is 800 px or less:

@media only screen and (max-width: 800px) {
  body {
    font-size: 90%;
  }
}

You can add these rules for any element, changing your button sizes, story padding etc.

1 Like
3

Yup this helps a lot. Thanks!

1 Like