Creating a max-width for entire twine project - Sugarcube

Considering that you’re using the StoryInterface special passage, you probably just need to modify the “max-width” property of the “#passages” element.

That said, I’d recommend learning to work with the Developer Tools window you have open in that last image. You can use that to select different HTML elements, then see what CSS is applied to those elements and change them to try out different styling. Once you have your changes figured out, then just copy those changes to your game’s Stylesheet section.

You might want to check out my comment here where I go over some of the basics of CSS and using the Developer Tools window.

Also, check out the “Using Media Queries” MDN article, which will help you create CSS which applies different styling depending on properties of the screen, such as its width, height, orientation, etc… With that, you could have different styling based on whether the browser is in mobile or desktop dimensions. There’s lots of other useful info on that site as well, so you may want to check this out as well:

Hope that helps! :slight_smile:

1 Like