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.
Comments
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: 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.
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.
There are a number of CSS selectors that relate directly to the #story element, some of them being: ... 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.
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