Trouble with automatic text-margins

Authoring Twine
1

In short, I am trying to make the actual text-area if you will in all passages appear within the confines of a very specific area on the screen, whilst still remaining adaptable to different screen-sizes.

This is the type of layout and scaling I want to permanently keep no matter what size screen is being used. However, if the screen is made smaller…

This is the result. What I want to happen is for the text to fit within the marked red box, rather than going behind the image-box to the right.

This is what I currently have in my Stylesheet that is relevant to the issue:

#passages {
  margin-right: 25em;
  margin-left: 0;
  min-width: 72.5em;
  border: 0;
}

Note that the “min-width” was the only way I could find to make the main text-box the appropriate size, as otherwise, the text-box instead remains much too small, not filling out the area properly.

Any pointers in this regard? Do keep in mind that I am relatively new to Twine and Sugarcube, meaning I am likely to not understand particularly complex wording. I am quite good at understanding examples, however.

2

If you want everything to stay in a box, you probably want to use width instead of min-width. There’s also a lot of other settings you can use to fine-tune your control of the box. You may also want to consider using specific span/divs for this, instead of styling every passage in your story. This allows you to have a lot more control of where and how things appear, especially if you’re going to do a “text box next to image box” kind of display.

I’ll give an example from a CSS I use:

#txt {
position:absolute;
font-size:1.1em;
font-family: "Consolas", Consolas, Monaco, monospace;
line-height: 1.1;
top: 3em;
left: 12%;
background-color: #1B1B1B;
color: tan;
border:ridge;
border-color: tan;
border-width: 0.2em 0.2em 0.2em 0.2em;
border-radius: 0.1em; 
height:30em;
width: 700px;
padding:0.6em;
}

You’d use <span id="txt">Text here</span> or <div id="txt"> </div> etc to use it in a passage. If you want every passage to be the same, of course, there’s nothing stopping you from doing something similar with the passage styling in general.

Disclaimer: I’m no CSS wizard, this is just what I’ve picked up from fooling around with UI styling for a while.

Edit: Oh yeah, the different formats for sizes (i.e, em, px, and %) there are pretty sloppy, they are just that way because I haven’t bothered to change it. If you want to scale things to different displays without setting a use-case for every resolution, you probably want to use em and finetune it.

If you don’t like doing everything yourself, this topic may be of interest.

3

If you want an example of how to implement a Right Sidebar that exists outside the main Passage area then the [SugarCube 2.7.2] Creating A Panel Similar To The UI-Bar thread in the Old Twine Forum Archive may be of some help.

warning: Make sure you read all of the thread because it includes a fix (from TheMadExile) for those using the Twine 2.x application.