Simple CSS help

Authoring Twine
1

I’m trying to do something I think should be very simple but I have no knowledge of CSS and everything I look up assumes I know a bit more than I do.
I have written a short branching narrative story using Harlowe 2.1, but some of my text on a page is too long to fit on a single screen on some devices. I believe I should be able to use overflow to add a scroll wheel to let the reader scroll down one this happens, but I when I’ve tried to do this it hasn’t work, which makes me think I’m missing a CSS element I need to use.
Right now what I’m trying looks like this

tw-passage{overflow: auto;}

Am I on the right track and just missing something simple, or is there a different approach I should use?

Thanks

2

Edit: I answered this below, but I wanted this to be read first, so I put it at the top.

Your page isn’t scrolling without using CSS? I managed to miss this fact before writing the answer. I believe it really should be scrolling right out of the box no matter how large the text area gets.

Are you doing anything else funky with the CSS that might be messing that up?


Previous answer:

The scroll bars only engage if the text area is a fixed height. Otherwise the browser will expand the page infinitely and the scroll bars will never happen.

Try doing this:

tw-story {
  /* vh is the viewable height of the viewport, so it'll expand/contract with resizing */
  height: 100vh;  
}
tw-passage{
  overflow: auto;
}

There’s padding above and below the text area which is set to 5% by default, which may not be what you want.

You can adjust the size of the padding like this:

tw-story {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 100vh;  
}
tw-passage{
  overflow: auto;
}
1 Like
3

Using your code to define the text area worked great, thank you so much. The only other CSS i was using before was some formatting to indent paragraphs, so I’m not sure why it wasn’t happening before, but I’m admittedly less concerned about it now that I have a solution.

1 Like