Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[Sugarcube] How to remove blank space on either side of text?

There's this large blank space on either side of the text and I would like to get rid of it.

This is currently what my project looks like.

and this is what I want it to look like.

I tried using the ui bar stylesheet info from the sugarcube site but I could only move it a very small amount to the left.

Comments

  • edited August 2016
    If you open the dev tools in your browser, you'll be able to identify the exact element that's causing the issue. My guess is it's the body element. Try
    body {
    	margin-left: 3.5em;
    }
    

    You will probably also have to increase the passages width and the font size to get it to match the picture exactly. The left border is caused by the body margin, but the right border is caused by the passage width. If you look at dev tools you should be able to see how the elements are positioned, as well as make some temporary css changes to figure out what numbers to adjust.
  • Using your suggestion I've found a few ways of doing what I want but they all screw up the scaling on smaller windows, so I've just decided to leave it as it, thanks anyway.
  • I actually fixed it. Just put
    #passages {
    	max-width: 72em;
    }
    

    into your story. The 72 can be replaced with any number; the default is 54.
  • edited August 2016
    Scaling on smaller screens is a separate issue addressed by media query rules.

    Eg if you want to introduce separate #passages rules for screens under 1920px wide you would insert after the #passages css:
    @media screen and (max-width: 1919px) {#passages{max-width: 72em;}} 
    

    More information: https://css-tricks.com/css-media-queries/


    For CSS when you change one thing you might have to change others. SugarCube has default media query rules that govern how it appears on smaller screens that you may need to change further once you change something else.
Sign In or Register to comment.