Change the text width (Harlowe)

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2
Story Format: Harlowe 3.1

Hello,

I am trying to control the text width. It looks great on desktop, but it takes a lot of empty space (left and right) on mobile device. I fiddle around with CSS and can’t seem to get it working.

I have already got rid of the sidebar’s icon with:

tw-icon.undo {
	display: none;
}
tw-icon.redo {
	display: none;
}

What am I missing?

Thanks!

2

I haven’t worked with Twine for a while, so can’t guarantee the elements are still named the same, but this looks to me like something to be handled by setting the width of the twine-specific elements to whatever you need. Try something like the following to set the width to 100%.

tw-story {
  width: 100%;
  margin: 0;
  padding: 0;
}

tw-passage {
  max-width: 100%;
  max-height: 100%;
}

If you don’t need the buttons anyway, you can probably remove the sidebar altogether like so:

tw-sidebar {
  display:none;
}
3

Thank you! I’ve been looking for the answer all day. Trying numbers out, I think I managed to get a better arrangement.

Cheers!