Left margin/padding won't go away

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2
Story Format: 2.3

Hi there,

I am trying to get rid of the left gap (margin or padding) and I don’t know where to find it on CSS. I’ve tried “margin: 0”-ing several things as well as “padding: 0” but it won’t go away.

(If I get rid of the ui-bar, with display: none; the gap gets even bigger—isn’t this weird? Isn’t “display: none;” supposed to make things disappear without leaving a gap in their place?

But there is also another weird behaviour that I get on the browsers. If I have a wide browser window when I first open the story and then drag it to a narrower window, I don’t get the border:

But if I refresh the page, it changes to this:

The left gap comes back. What is going on?

And since we’re at it, I also can’t give some padding to the right. The text is stuck on the right side of the mobile’s screen. :confused:

Thanks!

Calling the UIBar.destroy() function from your project’s Story JavaScript area is the correct way to remove the Left Side-bar, and the extra amount being added to the margin-left property of the <div id="story"> element.

UIBar.destroy();

And technically it is, because the Left side-bar is displayed above the blank area generated by the <div id="story"> element’s margin-left value. You can remove the story’s left and right margin by placing CSS like the following within your project’s Story Stylesheet area.

#story {
	margin-left: 0;
	margin-right: 0;
}

Next you will need to change the max-width property of the <div id="passages"> element so that the width of that element it is allowed to be larger than 54em in size. You will also likely want to remove the auto setting of that element’s left & right margins.

div#passages {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

Without knowing exactly how you are generating that layout and what custom CSS you are using to style it (and the rest of the page) it is difficult to state what is causing the effect you are seeing, however it is likely due to mistakes in the maths relating to how you are defining the size/placement of the elements, and their associated margins / padding / borders sizes.

Thanks, @Greyelf for the info! I’ll try the behaviour with UIBar.destroy();. Then I’ll probably have to get back to you with more info on my css.
:innocent: