Twine Sidebar Not Showing Up On Mobile

Authoring Twine
1

I’m using Twine 2.3.3 with SugarCube 2.28.2.

My story works perfectly fine on desktop, but when opened on a mobile device the sidebar just isn’t there, so the player is unable to see their stats (from the StoryCaption passage) or Save or Restart. I’ve tested it with both Chrome and Firefox with the same result.

The only CSS I have that would affect the sidebar/ui-bar is:

#ui-bar {
	width:12%;
  	font-size: 110%;
}

Which definitely shouldn’t make it disappear.

And the only JavaScript that should affect it is:

$('#ui-bar-toggle').remove();

Which should only remove the toggle button (as I don’t want the player to be able to stow the bar).

Any help would be appreciated.

2

If you look at the code found in these lines of the uiBarStart() function (in uibar.js) you will notice that if the Config.ui.stowBarInitially configuration setting has a integer value (defaults to 800) then the ui-bar is automatically “stowed” if the width of the current “window” is not greater than that integer value.

eg, if Config.ui.stowBarInitially equals 800 (px) and the “window”'s width is 750 (px) then the left side-bar is initially shown in a “stowed” state at startup…

If you change the value of Config.ui.stowBarInitially to false within your project’s Story JavaScript area then the left side will always be shown in a non-stowed state at startup.

Config.ui.stowBarInitially = false;

The only CSS I have that would affect the sidebar/ui-bar is:

Mobile devices come in a wide range of screen sizes so simply setting your ui-bar to always be 12% of the device’s current width may result in a very narrow area.
eg. 12% of 640 (px) is only 76 (px)

The reverse is true for desktop monitors which can be quiet large, thus 12% of their width could result in a very wide area.

You may want to use media queries to conditionally set a different value for the #ui-bar’s width based on the default width of the screen being used to view your game, as explained within this 2018 article.

3 Likes
3

Thanks so much for the help!

I’ll look into the responsive styling as well. Thanks for the link.

4

Another option would be to simply remove the $('#ui-bar-toggle').remove(); part, since then people could collapse or expand the UI bar as needed. While I understand that you don’t want the stats there hidden, it would allow mobile users the option to toggle between having the stats visible or having more of the text visible on the screen.

Alternately, you could move the stats indicator to the top or bottom of the screen. I have some sample code which shows you how to make a bottom or top bar here. That code also shows the use of CSS which is affected by screen widths, like what Greyelf discussed above.

You might also consider using something like my health bar sample code if you want a visual representation of the player’s stats. (Click “Jump to Start” on the UI bar to see other sample code there.)

Hope that helps! :slight_smile:

1 Like