Trouble with automatic text-margins

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.

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 {
font-family: "Consolas", Consolas, Monaco, monospace;
line-height: 1.1;
top: 3em;
left: 12%;
background-color: #1B1B1B;
color: tan;
border-color: tan;
border-width: 0.2em 0.2em 0.2em 0.2em;
border-radius: 0.1em; 
width: 700px;

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.

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.