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.
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:
