Twine Sugarcube: redefining horizontal margins

Authoring Twine
1

Twine Version: 2.5.1

So I needed/wanted to expand Sugarcube’s default maximum width because I had a random header that I didn’t want to go to two lines, though sometimes it did. Adjusting left Sugarcube margin. - Twine Forum helped nicely with that.

This is what is in my stylesheet override:

#passages {
    max-width: 75em;
    margin: 0 auto;
};

narrow {
  max-width: 30em;
  margin: 0 auto;
}

But you may notice the “narrow” css I added, in an attempt to make the main text margins a bit narrower. My hope was that this code would work:

<div class="narrow">Text I want in more narrow margins</div>

I tried other tags like span and p, and other elements such as style, and nothing worked.

This may be a basic CSS/HTML problem instead, and I get the sense I’m missing something basic. But all help is appreciated!

2

Might want to use class instead of style
<div class="narrow">

And have
.narrow
In you css

1 Like
3

Thanks, that’s a good start…I may have started with “class” but I switched over to “style” in an attempt to see if anything would work.

So I edited the original code to reflect that. But there seems to be more to go.

4

CSS stops processing at any syntax error, so you have to ensure your CSS is error free.

To that end. You should remove the unnecessary semicolon at the end of the #passages rule—i.e., }; → }. In CSS, semicolons terminate property:value pairs, they’re not used for anything else.

3 Likes
5

Thanks, I think I threw the semicolons in later to make sure nothing was wrong.

I’m still seeing a lack of centering/indentation with

narrow {
  max-width: 30em;
  margin: 0 auto;
}

and, in the twine source,

<div class="narrow">Text that spans more than one line,
so I'm pretty sure it's not just setting the width and making
the text left-aligned
</div>

Just to be sure here that I’m communicating what I want, I have “what I have” and “what I want” graphics.

Have:

what-i-have
what-i-have1640×184 11.8 KB

Want:
what-i-want
what-i-want1640×184 9.91 KB

6 
.narrow { <- your missing the dot to create the class here
  max-width: 30em;
  margin: 0 auto;
}

.class ~ #id ~ element

1 Like
7

Manon has already explained why your CSS rule wasn’t being applied when you assigned narrow to an element’s class attribute.
eg. you left off the leading full-stop from the rule’s selector, that indicates to the CSS engine that your rule targets a CSS class named narrow.

This CSS Selector reference might help you in the future when crafting the selector of any new CSS rule you create.

3 Likes
8

Thanks to you both for that. I’d used w3schools a lot before but not here. I’m a lot less confused why some things have a dot before them and some don’t.

I thought I tried all the possibilities I could, but I guess there were more.

It’s great to have this out of the way–things work better now, and I had a feeling I was missing something relatively trivial.

1 Like