So I’m editing my first IF game, made with Twine and Harlowe, and it’s overall pretty simple stylistically. I am running into issues getting certain macros to display well on mobile screens though. This is mostly non-breaking, except when it comes to a dialog: macro popup early in the game. Code in case it helps:
(dialog: bind $drink, "What do you want to drink?", "Beer", "Martini", "Bourbon","Wine")
When on mobile, the popup box is too wide for the screen so the first and last options cannot be clicked, regardless of whether the phone is in vertical or horizontal mode.
Is there a way around this or to fix it? I won’t rebuild my game, but I’m hoping for options other than: “warn users the game isn’t optimized for mobile web viewers.”
If you use your web-browser’s Web Developer Tools to inspect the HTML structure being generated by your (dialog:) example, you will see something like…
<tw-dialog>
What do you want to drink?
<tw-dialog-links>
<tw-link style="margin:0 0.5em 0 0" tabindex="0">Beer</tw-link>
<tw-link style="margin:0 0.5em" tabindex="0">Martini</tw-link>
<tw-link style="margin:0 0.5em" tabindex="0">Bourbon</tw-link>
<tw-link style="margin:0 0 0 0.5em" tabindex="0">Wine</tw-link>
</tw-dialog-links>
</tw-dialog>
…and if you select the <tw-dialog-links> element while inspecting that HTML, you will learn Harlowe is used a Flex layout manager (aka Flexbox) to display those link elements.
And if you read the Flex article I linked to, you will learn that a CSS flex-wrap property can be used to control if & how Flex wraps the child elements it is laying out.
eg. adding the following CSS Rule to your project’s Story Stylesheet area will instruct Harlowe to automatically wrap the links shown in a dialog.
tw-dialog-links {
flex-wrap: wrap;
}
warning: I didn’t test all the potential screen / monitor sizes in common use. So that wrapping may look strange in some situations. Harlowe also used a justify-content: flex-end assignment on that same <tw-dialog-links> element to force the alignment of the series of links to be right (end) justified. You may was to review the possible options of that CSS justify-content property to determine if another is better suited for your needs. You may also want to review the article for any other Flex related property that might help you style that area the way you want it to look.
That works so much better now, thank you!!!
I ended up using flex-direction: column to make it show up well with the least work on my part, I’ll be referencing that link in the future.
Thanks again!
