Hi, I am new to Twine and very, very new to CSS. My use of interactive fiction programs was restricted to Inform until about two days ago.
I am working on a story and one of the things that drives me crazy is when you resize the window, the text shifts. I would like the text to be fixed in place but I can't for the love of me figure out the corresponding code to do so. I've searched high and low online but without any luck. (Possibly overlooking or just using the wrong terminology.) Heck, I'd even be about putting a border around the text to keep it in place but yeah, also having no luck with searches and even trial and error.
I am using Sugarcube. Thanks a bunch.
Comments
The current width of the "passage" area is determined differently for SugarCube 1 than it is for SugarCube 2.
1. SugarCube 1.x's width is a dynamically calculated percentage based on the current width of the web-browsers view-port.
The calculation is made up of the following part.
a. 100% of the view-port's current width.
b. minus the left (21em) and right (3.5em) margins of the body element.
c. minus the right margin of the #passages element, which is 16% of the body element's current width.
2. SugarCube 2.x's width is either: 54em wide if there is room; or calculated as follows.
a. 100% of the view-port's width.
b. minus the left and right margins of the #story element.
note: The side-bar being stowed/unstowed can effect if the value or calculation is used, and the size of the left/right margins of the #story element change depending on a set of predetermined view-port width limits. (to handle different sized screens)
conclusion
If you want the "passage" area to always have a fixed width then you need to change the existing CSS of the story format you are using, what changes you need to make depend on what you want the end result to look like.
Thanks for your help, though.