I need help with problematic CSS code, and posible Twine 2 harlowe bug. [SOLVED]

rubereaglenest

Hi!,

I have a CSS styling that works as intended when I hit the Play button in Twine 2 online editor, but when I publish the game, the CSS code just don't work.

What I'm trying to do is a responsive design that plays well on mobile. So when the size of the windows is smaller than 480px, the width is 100% (no margin for mobile precious reading space) and a fixed font-size.

@media (max-width: 479px) {
	tw-story {
    	font-size: 17px;
    	width: 100%;
	}
	tw-sidebar {
		display:none;
	}
}

This code is the same that Secret Agent Cinders uses, but where it works for her, it didn't work for me:

Probably something is wrong with my overall CSS code and I need help, but I think this shows a new bug for Twine 2:

as I said, when you test a game inside the editor the result is different from the finale published story.

I've attached an example, if you load it up on your twine 2 editor, you can test the thing and see that code works. But if you publish the game, the html result will not work properly when the size is resized or it is played on mobile.

https://dl.dropboxusercontent.com/u/35915748/CSS%20style%20error.html

Any idea of what I'm doing wrong? The differences in behaviour proves a bug in Twine 2?

Regards,

Ruber Eaglenest.

greyelf

I tested both your dropbox link and your attachment on Windows 10 in Chrome, Firefox and Edge. Each time I reduced my web-browser window width to be 479px or less your media at-rule activated and modified the tw-story element as expected.

Were you testing on a desktop/laptop, if so which operating system (brand, version, edition, 32/64bit) and web-browser (brand, version, 32/64bit) did you use to test your HTML file.

If you tested on a mobile device then you need be aware that the mobile operating system and web-browser can override your CSS settings when it calculates the font size to use.

rubereaglenest

Thanks greyelf:

One user of the euphoria if room has solved the problem. (Oreolek, thanks!)

I need to insert this in the HEAD section of the HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1">

That means "don't touch my proportions and sizes" to mobile devices. (in his words).