Hi,
I was having trouble making a DIV take up the full width of the screen for some reason. I thought it’d use standard CSS parameters, but for some reason, the DIV is stuck in the corner and doesn’t take up the whole page. As seen in the image below:
The DIV uses the id “steam” and for some reason, it’s squished behind the Twine side panel. If you would like to see the HTML and CSS I’ve written. I uploaded screenshots here.
If anyone is able to give me any advice on this it would be much appreciated. :~)
Sam
Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2.3.13
Story Format: Sugarcube 2.34.1
I created a new SugarCube based project in the Twine 2.x application, that contained the following CSS in its Story Stylesheet area…
body {
background-color: transparent;
}
#steam {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: -1;
background-color: blue;
}
…and the following within the project’s initial Passage…
<div id="steam"></div>
Welcome to the sauna.
…and the blue background of the <div> element correctly covered the entire of the web-page’s view-port when I used the Twine 2.x application’s Play option.
Thank you for your help! I ended up figuring it out by testing what you showed. It was an issue where external Javascript was blocking my sizing parameters. :~)
