Ask a Question

Font changing size based on amount of text on mobile

0 votes
by (220 points)

Hello, I'm encountering a jarring problem where text size is changing depending on the amount of text I am displaying when run the story on my samsung galaxy S6's chrome browser.

My plans for the passage is to print descriptive text from various item's datamaps so clicking between longer and shorter descriptions creates very unpleasant font size changes.

Is there a way to have a more consistent font size (at least on this passage) while keeping mobile responsiveness?

I am using Twine 2.2.1 with the Harlowe story format

Here are dropbox links to images of the problem.
Image 1 image 2

 

Here's is the code for the passage displaying too large.

{

<div class="center">
YOUR STUFF
</div>
<br>


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<br>
<br>

<div class="center">
	(link: "BACK TO BAG")[
		(goto: "inventory")
	]
</div>

}

Here is the code for the passage displaying too small:

{
<div class="center">
YOUR STUFF
</div>
<br>


Lorem ipsum dolor


<br>
<br>

<div class="center">
	(link: "BACK TO BAG")[
		(goto: "inventory")
	]
</div>
}

And here is my CSS:

body {
 font-family: 'Special Elite', cursive;
 
}

tw-story {
  padding: 5% 5% 5% 5%;
}

tw-passage {
  text-align: left; 
  font-size: 4vh;
  font-size: 4vw;
  font-size: 4vmin;
  line-height: 1.3;
}

.center {
 text-align: center; 
}

I hope I have included enough information.

Thank you!

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

You will need to manually edit the story HTML you generated via the Publish to File option in a Text Editor, and add the following viewport meta element to the head section of the file.

<meta name="viewport" content="width=device-width,initial-scale=1" />


note: The resulting head section of the HTML file will look something like the following

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>The name of the Story project</title>
...


This should fix some of the resolution related issues of your story HTML file when viewed on a mobile device.

by (220 points)
That fixed the problem, thank you!

If I may ask, what does that change so that the problem no longer occurs?
by (159k points)

> what does that change

The Responsive Web Design - The Viewport web-page give a very simplistic explaination of 'viewport' and 'scaling'.

Snow Theme by Q2A Market
Powered by Question2Answer
...