Shifting the default passage location on the screen in Sugarcube

Larkawolfgirl

I know hardly anything about code, but I have finally managed to decrease the width of the of the ui-bar. I had hoped that doing so would shift the passage text to the left with it, but this didn't happen. I tried changing the width of the text, but this just made it go further to the right. Is there a way to set the default starting location on the screen of the text? I tried to tell it to left-align the following ways, none of which worked:
#passage {align-left;}
#passage {align="left";}
#passage {align left;}

Now that I think about it that might position the text behind the sidebar instead of next to it. Any tips? I basically just want the text to fit more centered on the screen instead of having so much empty space on the left side. I included a screenshot just so that you can see what I mean about the empty space on the left.

greyelf

You don't state if your using SugarCube 1 or 2, I am going to assume it is 1 based on the look of your attached image.

As you have determined yourself the width of the side-bar itself is controlled by the #ui-bar element.
The placement of the #passage element is controlled by the margins of the body element, so to move the #passage element to the left you need to decrease the margin-left (the default is 21em) of the body element.

I don't know how much you decreased the side-bar width by so my example will only include the property to change, not what value to change it to:

body {
	margin-left: 21em;
}

Larkawolfgirl

Oh, I didn't think the coding would be any different between the versions. But thank you so much! That worked perfectly.

TheMadExile

SugarCube 2.x and 1.x are pretty different in some ways, their HTML structure and CSS being one of the larger divergences. I've tried to make SugarCube 2.x less of a pain to style than 1.x was/is.

Anyway, for SugarCube 1.x you will probably also need to modify one of the viewport media queries, since they also adjust the margins in play here. For example:

@media screen and (max-width: 1136px) {
	body {
		/* Should be 1 less than whatever you've set the base body margin-left to. */
		margin-left: 20em;
	}
}