Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2.2.1
Story Format: Sugarcube 2.21.0
I am currently working on a new game which is suitable to play across multiple platforms. I have used my own html code to make the game pages responsive to any screen size but I find that some pages work fine but some won’t load (blank screen only - seem to appear then disappear). The formatting code is the same on each page.
The game works fine on different size PC screens - just not on my mobile. (Have uploaded the game to both UK Text Adventures and Itch.io to test it.)
I suspect I should just use Twine’s inbuilt code rather than using my own html but not sure.
I’m not really sure, but I suspect it has something to do with the combination of float: left and width: 100%. If you have a div or image or whatever that is floating to the left, making it the full width would making the text to the right not display, I think? Or maybe it’d be placed below it… Either way it seems like it wouldn’t be what you want.
Can you provide some example code of the script that uses this CSS and doesn’t display correctly? It’s difficult to guess just by the CSS.
Below are two sample pages from my story - one works on a mobile and one that doesn’t (the page appears for a fraction of a section then goes to blank).
Working correctly
<<masteraudio stop>><<set $Day to 2>><div class="col-12"><div class ="header"><div class="left"><i>New Zealand Adventure</i><div class="right"><img src="Auckland.jpg" width=65%></div>
Location: $Town <span id="map">(<i>[[Map]]</i>)</span>
Day: $Day <table><tr><th><img src="MoneyS.png" width=90%></th>
<th><img src="Sheep.jpg" width=90%></th></tr>
<tr><th><span id="Test">$Money</span></th>
<th><span id="Test1">$Sheep of 5</span></th></tr></table></div></div></div><div class="col-3"><div class="options"><span id="suitcase"><<linkreplace "Items in my Suitcase">><<if $Kiwi==0 and $Coin==0 and $Snow==0>> You have no items at the moment.<<else>>$Kiwi Kiwi Fruit
$Coin Rare Coins
$Snow Snow Globes<</if>><</linkreplace>></span></div></div><div class="col-7"><span id="Info">It's the second day of your New Zealand adventure.
Today you are heading north to Paihia, the main town in the Bay of Islands. [[Map]]</span>
<<linkreplace "Continue">><<replace "#map">><</replace>><<replace "#Info">><i>[[Travel and Entertainment Guide->Travel News2]]</i>
[[Hire a Car->CarDay2]]
[[Take a Bus->BusDay2]]
[[Take a Tour->TourDay2]]<</replace>><</linkreplace>></div>
Not Working (Take a Tour link from above)
Location: $Town <span id="map">(<i>[[Map]]</i>)</span>
Day: $Day <table><tr><th><img src="MoneyS.png" width=90%></th>
<th><img src="Sheep.jpg" width=90%></th></tr>
<tr><th><span id="Test">$Money</span></th>
<th><span id="Test1">$Sheep of 5</span></th></tr></table></div></div></div><div class="col-3"><div class="options"><span id="suitcase"><<linkreplace "Items in my Suitcase">><<if $Kiwi==0 and $Coin==0 and $Snow==0>> You have no items at the moment.<<else>>$Kiwi Kiwi Fruit
$Coin Rare Coins
$Snow Snow Globes<</if>><</linkreplace>></span></div></div><div class="col-7"><span id="Info">The coach tour costs $60 and goes from Auckland to Paihia and also includes:
Shopping at Whangarei
Sight seeing at Cape Reinga
Swimming with dolphins at the Bay of Islands
<<linkreplace "Buy Ticket">><<replace "#map">><</replace>><<replace "#Info">><<set $Money to $Money-60>><<if $Money lte 0>><<goto "Finish Broke">><</if>><<replace "#Test">><<audio Deduct play>><div class="animation"> $Money</div><</replace>><<replace "#Info">><</replace>><<timed 2s>><<goto "TourWhangarei">><</timed>><</replace>><</linkreplace>>
[[Hire a Car->CarDay2]]
[[Take a Bus->BusDay2]]</span></div>
All pages display correctly on different PCs.
Thanks so much for assisting with this
You should be able to edit your post (there should be a pencil icon just below your message), select the code, and hit the “preformatted text button”, the one that looks like: </>
Or put a line consisting of three backticks (```) before and after your code to make it a code block:
I’m not sure exactly how you want it to look, but I can give you a method you can use so that you can fix problems like that more easily.
If you open the page in a browser like Chrome or Firefox on your computer, and then open up the “Developer Tools” window (usually by hitting F12 or CTRL+SHIFT+I), that will let you play around with the CSS fairly easily. Now, look for an icon which looks like a cell phone in front of a tablet in the upper-left or upper-right of the “Developer Tools” window. Clicking that icon will let you toggle between a PC and cell phone view of the page. The cell phone view also lets you change the dimensions to match different phones and tablets, so you can see what they’ll look like.
So, just change the screen to the dimensions you want to check that way, and then play around with the CSS until it looks correct there. Then try a few other screen sizes to make sure it still looks good. Once you have it looking the way you want, just copy the changes you’ve made to the Stylesheet section of your game, and that should fix it.
@ tayruh
For the record, I tried removing the class=“col-”] {
float: left;
padding: 10px;
}
code and all pages seem to be coming up fine now. Thanks to all.
Either way it seems like it wouldn’t be what you want.
