How do you make the sidebar shrink depending on the screen resolution? Twine 1.4.2 Sugarcane

TheShadowGamer

Here is my game: http://sulley.cah.ucf.edu/~mi963011/3024TwineProject/Twine Server Test/Legends of Luminia Server Test.html

Depending on the resolution, the sidebar will go inside of the text box. I have it so the text box will change dimensions from copying this code (some of it is edited) but I wanted to put the sidebar back in so I removed that code, but I can't figure out how to make multiple side-bar resolutions.

html {
  /* Vertical colour gradient */
  background-image: [img[Village]]
  background-image: 
  background-attachment: fixed;

  /* Fallback colour */
  background-color: black
}
body {
  /* Remove default styles */
background-image: [img[Village]]
  background-color: transparent;
  margin: 0% 0 0 0;
	padding-top: 6em;
  font-size: 100%;
  /* Used to center the box */
  text-align: center;
}

#passages {
  /* Box background (white with 70% opacity) */
  background-color: rgba(255, 255, 255, 0.7);

  /* Border */
  border: 2px solid white;

  /* Rounded corners */
  border-radius: 1em;

  /* Box width */
  width: 60%;

  /* Center the box */
  display: inline-block;
  min-height: 50%;
  margin:auto;
  margin-bottom: 20%;
  padding: 0px;
}

.passage {
  margin: 0px;
  /* Inner margin within the box */
  padding: 2em;

  /* Text formatting */
  color: black;
  font-size: 150%;
  text-align:justify;
  font-family: serif
}


/* Links */
a.internalLink, a.externalLink {
  color: darkblue;
}
a.internalLink:hover, a.externalLink:hover {
  color: royalblue;
  text-decoration: none;
}

/* Shrink the page when viewed on devices with a low screen width */
@media screen and (max-width: 960px) {
  .passage { font-size: 90%;}
  #passages { width: 70%; }
}
@media screen and (max-width: 840px) {
  .passage {  font-size: 87.5%; }
  #passages { width: 80%; }
}
@media screen and (max-width: 720px) {
  .passage { font-size: 75%; }
  #passages { width: 90%; }
}

How do I make the shrink affect the sidebar as well?

greyelf

In Sugarcane's default CSS the positioning of the passages area in relation to the sidebar is controlled by three things.

1. Knowing the width of the sidebar ID'ed element. (12em)

2. Knowing the left fixed offset of the sidebar ID'ed element. (7.5em)

3. Using the above values to determine the value to assign to the margin-left of the passages ID'ed element. (18.2em)

In your CSS you have changed the margin-left of the passages element to be auto, which can result in its calculated value being less than what is needed to correctly show this element to the right of the sidebar element.

Some possible options are:

1. Change the left fixed offset of the sidebar element based on the view-port width.

2. Change the margin-left of the passages element based on the view-port width.

3. Change the font-size and width of the sidebar element based on the view-port width.

4. Some combination of the above.

TheShadowGamer

Wait that was it. All I had to do was remove the auto. Thank you.

Why is it always something so simple?!?