Reduce Harlowe's default margin

Rakesh.Nair

Hey folks, sorry if this question has been asked elsewhere, Twine Forum search isn't helping.
Is it possible to alter Harlowe's margin (margin, not alignment) to the extreme left end of the screen like Snowman ? Harlowe's Default margin takes a lot of empty space in mobile screens. I deleted the sidebar with the 'display:none' CSS alteration, but the margin isn't reducing. Please help.

greyelf

note: Because the next release of the Twine 2 application will include two versions of Harlowe (1.2.3 and 2.0.0) it would help if you also included the story format version (1.2.2) when asking a question, as answers can be different for each version.

A. Harlowe's left and right 'margins' are a result of the following default CSS being applied to the tw-story element.

tw-story {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}

... as you can see, the width is a percentage of the current view-port width of the web-browser, and the left/right margins are set to automatic which results in the tw-story element being centred horizontally.

B. Snowman v1.3.0 applies the following default CSS to the div element with an ID of passage

#passage {
	max-width: 38em;
	margin-right: auto;
	margin-left: auto;
}

... again automatic margins are used to centre the main element of the page but in this case there is no default width but there is a restriction to the maximum width of the element.

If you add your own custom CSS to your story based on that in point A then you should be able adjust those (or similar) properties to achieve the result you want.

Rakesh.Nair

Thanks for the help. Figured out it was that damn width and not the margins The game was appearing very narrow in android screen. Thanks again.

MeekoSoup

I suppose it might be too late, but could you or someone else post their working solution to this? CSS is just kicking my butt the last few days, and I can't seem to find a satisfying solution to this.