How to expand usable space on screen in Sugarcube 2.18?

Question

Currently using Twine 2.1.3 and Sugarcube 2.18.0

When I run my Twine game, even if I remove the UI bar, there's a huge amount of space on both sides of the screen that I can't seem to access.  In this game, I've got a large table with information that gets updated as the game is played.  I'd like to be able to expand the table into the apparent deadspace on the left and right sides.

Example of the screen in play.

Is there a way to enlarge the useable space available to Twine?  Does this question even make sense?

Answer 1

Remove the UI bar correctly via its API, specifically UIBar.destroy().  For example: (goes in Story JavaScript or equivalent)

UIBar.destroy();

 

Answer 2

You can make it look however you want by changing the correct CSS settings in your Stylesheet section.  For the width of the text, here are the main two CSS properties to modify:

#passages {
	max-width: 54em;
	margin-left: calc(50vw - 26.375em);
}

Assuming you have no UI bar on the left, if you want a particular margin width (for example "5em"), regardless of the display size, you can do this:

#passages {
	margin: 2.5em 5em !important;
	max-width: none;
}

(where "5em" is the left and right margin width you want, and "2.5em" is the top and bottom margin height)

You can also right-click on the passage, choose "Inspect" on the pop-up menu, click on the <div> where id="passages" and play around with the CSS until you find something you like, then copy all of the changes you made there to your CSS.

Hope that helps!  :-)

Comments

*poorly suppressed fist-pump of excitment*

Thanks, HiEv, that's IT!