Howdy, Stranger!

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

I don't want to be responsive

I'm using sugarcube latest ver, I want to stick some images in place in my twine, but the responsive layout changes their positioning. My images slide all around the background: url(); when the window resizes.

I've tried using @media to get rid of the margin-left and right which happen, but I have no idea rn how to stop this from happening.


  • Have you tried using CSS properties like background-position and background-size to position and size your background image, this code css-tricks article on background-position may help.
  • I've no problems with the background image, that's stationary using background positioning to keep it in the right area. That's on body not passage, it's everything #story down to passages which gets moved around.
  • Sorry, your original post stated that your images where moving around the background so I gave the suggestion I did.

    In your case you have two basic choices:

    1. Position the foreground images using a combination of position (either absolute or fixed) and left/right/top/bottom CSS properties.
    Place the following in a standard passage:
    Place the following in your stylesheet tagged passage:
    #smile {
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	left: 50px;
    	top: 50px;
    	z-index: 60;
    note: you only need to set the z-image property if the image is being position over the SugarCube sibe-bar.

    2. Remove all of SugarCube's default CSS related to margins, padding, position/size on the HTML elements relevant to the placement of the passage area.

    You did not state which version (1.x or 2.x) of SugarCube you are using but you can use your web-browser's built-in Development Tools to inspect the generated HTML elements and their associated CSS. This will give you an idea of which properties to change, be aware that some of the relevant properties will be set on the element's parent/ancestors elements.
  • Sorry, using sugar cube 2.0

    I can't use absolute or fixed because those move around ordinarily. Only relative moves in relation to both the page moving and the background being fixed.

    It's hella hard to figure out what areas need to be tagged properly.

    Also I removed the sugar cube UI which doesn't entirely help with postioning, but the UI had to be removed either way.

    The main issue I have is #story creating some margins of differing sizes when the screen is resized, and I can't tell it to not make those margins.
  • Without examples of the custom CSS you are using (to hide the side-bar / reposition HTML elements / etc..) and the Passage content you are trying to layout it is hard to guess exactly what your issues are.

    There are a number of CSS selectors that relate directly to the #story element, some of them being:
    @media screen and (max-width: 768px) #story
    @media screen and (max-width: 1136px) #story
    ... and generally if you want a margin to be the same as another selector you just assign it the same value as the other selector.
  • lol I was being a massive derp and put the wrong value in #story {margin-left:; } etc. I put none instead of 0.

    And then I just had to do stuff like remove the body margin left 3.5em thing and mess around a lot more, including adding overflow: hidden to #story and body

    still messing with it, but the initial dum dum move was putting the wrong value in, always the case haha
Sign In or Register to comment.