Harlowe default responsiveness of text = too small, too narrow!

jhaque

Hi all, my game in Harlowe looks great on desktops, but when the screen is narrowed for mobile:

1. The text size goes ridiculously small.
2. There is a lot of wasted blank space on both sides of the passage.
3. The undo/redo button takes up a bunch of space, reducing text size/passage space further.

How do I solve these 3 problems? In particular I want to get rid of the undo/redo buttons.

In a Twine 1.x game I made, I used the below code to control this issue, but it doesn't seem to work with Harlowe:

/* Shrink the page when viewed on devices with a low screen width */
@media screen and (max-width: 960px) {
  .passage { font-size: 100%;}
  #passages { width: 70%; }
}
@media screen and (max-width: 840px) {
  .passage {  font-size: 100%; }
  #passages { width: 80%; }
}
@media screen and (max-width: 720px) {
  .passage { font-size: 100%; }
  #passages { width: 90%; }
}

greyelf

1. If you look at the default CSS of the 1.2.2 version of the tw-story element you will see it has:

a. a width of 60%

b. automatically calculated left and right margins used to centre the above 60%.

c. a default font size of 1.5em

d. three media at-rules based on max-width that change the default font size:

@media screen and (max-width: 1024px) {font-size: 1.2em;}

@media screen and (max-width: 896px) {font-size: 1.05em;}

@media screen and (max-width: 768px) {font-size: 0.9em;}

You will need to modify the above a-d values to fix points 1 & 2 of your request, but note that the existing values are based on the web-browser's default font size and that mobile web-browser can determine that default size differently to how desktop web-browsers do.

2. If you look slightly further down the above linked source you will see the CSS for the tw-sidebar and tw-icon related selectors, which values you would need to change to fix point 3 of your request.