Creating a max-width for entire twine project - Sugarcube

HI All,

Using tweego and sugarcube 2.36.1

I’m using storyInterface to make my own UI, but have come across a problem when trying to play my game on desktop. Mobile UI works perfectly, with everything in the right spots, but on desktop the project fills the entirety of the page and hides elements.

What I want to do, is limit the amount of horizontal space the project takes up. I thought I could use max-width in the or section to get the desired results, but I can only alter the width of the actual passages.

I’ve attached some images of what I’m up against and what I’m trying to do. I’m a novice at css and after a long slog of trail and error, I’m hoping someone could help point me in the right direction.

This is how it turns out on mobile, exactly how I want it.

This is how it turns out on website, stretching to full length and hiding some stuff at the bottom.

Ideally, I would like the max width on desktop to be how it is portrayed in this picture.

Any help I could get on this will be greatly appreciated.

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

I will take a look thankyou. I think media queries could help with some of my headaches.

Edit: Media queries was able to help me adjust the UI in desktop mode :slight_smile: