Text Moving with UI Bar - Sugarcube 2.36.1

Authoring Twine
1

Twine Version: 2.9

Hi all! Made an account just for this. I’ve been doing pretty well on my own, and managed to move the UI bar to the bottom of the screen (which I thought made me a coding whiz lol).
However, I’m running into a problem. Every time I toggle the UI bar, the passage text moves to the left - as if it still believes the UI bar is still there. The only somewhat solution I’ve found is to add a “position: fixed” to the .passage, but then it doesn’t use the rest of the space it has available to populate with text. Instead, it confines it to a fixed position (go figure.)

Just wondering if anyone has found a solution to ‘turn off’ the text shifting when the UI bar is toggled? Couldn’t find anything in the Sugarcube 2 documentation, but maybe I’m just tired, haha.

2

You need to override the following CSS rule

#ui-bar.stowed ~ #story {
  margin-left: 4.5em;
}

You can impose the default passage position with:

#ui-bar.stowed ~ #story {
  margin-left: 20em;
}

Or add your own desired margin.

3

Awesomeeee! Thanks sm! I had a look at the .stowed stuff, but didn’t think it was relevant - turns out it was!
I had to change some of my code around (I’m a really messy lol), but this was the perfect solution! Finally, I can focus on writing and not freaking out over the text moving all over the place!