Harlowe - can't get @media screen to work in stylesheet

Silvanoshei

Hey there,

I've been fiddling around with this for a while and looked at different tutorials and posts, but I must be missing something bleedingly obvious, because I can't seem to get the @media screen CSS to work even if I just copy-paste what other people say to have used.

So first I tried this.

@media screen and (max-width: 1280px) {
.passage { font-size: 120%; width: 51.2%; }

But then I read that that's a Twine1 thing (?), so I went with this, which I got from this post.

@media screen and (max-width: 1280px) {font-size: 1.2em;}

Changing the values for the font-size does nothing strangely enough. I removed anything else that alluded to font-size or margins (I do use "tw-sidebar {display: none;})

What I ultimately want to do with this is have about the same text width for every size of screen. I've noticed that for larger screen it makes the lines really long and it makes it hard to read, so I thought I'd make the margins and the text bigger when the screen size increases.

What am I missing? I hope any of you can point me in the right direction.

greyelf

If you look at the HTML of the Story HTML file you create using the Publish to File option you will see that the default font size and width/margins are:

tw-story {
	font-size: 1.5em;
	width: 60%;
	margin: 5% auto;
}

... which results in the left and right margins being around 20% of the view-port width each.

You will also see that Harlowe already has three media at-rules that further modify the font-size at the 1024, 896, 768 pixel break points.

@media screen and (max-width: 1024px){
	tw-story{ font-size:1.2em; }
}

@media screen and (max-width: 896px){
	tw-story{ font-size:1.05em; }
}

@media screen and (max-width: 768px){
	tw-story{ font-size:.9em; }
}

... so any additional break points you add need to take the existing ones into account.

To further complicate the font-size/left-right-margins issue Mobile web-browsers can use different algorithms to determine which font-size to use depending on the quantity of content to be displayed.

eg. the Harlowe CSS style: smart font size for mobile vs desktop? and related threads.

Silvanoshei

I think the part I was missing was the "tw-story" bit, so that's why it was doing nothing at all. Thanks.

Also, taking the existing break points into account, I realised that they scaled very nicely. 1.05em is 87.5% of 1.2em and 869 is also 87.5% of 1024 (same goes for 768px, being 75%). So for keeping about the same line length, you just divide the screen width by 10.24 (1%, because 1024 is 100%), to get the desired percentage value of your font-size.

I will have to test this properly, but I think this means (taking the most frequent resolutions that aren't the 3 included in the base html) that the CSS sheet should look like this:

@media screen and (max-width: 320px) {
  tw-story { font-size: 31.25%; }
}

@media screen and (max-width: 360px) {
  tw-story { font-size: 35.16%; }
}

@media screen and (max-width: 480px) {
  tw-story { font-size: 46.88%; }
}

@media screen and (max-width: 720px) {
  tw-story { font-size: 70.31%; }
}

@media screen and (max-width: 1280px) {
  tw-story { font-size: 125%; }
}

@media screen and (max-width: 1360px) {
  tw-story { font-size: 132.81%; }
}

@media screen and (max-width: 1366px) {
  tw-story { font-size: 133.4%; }
}

@media screen and (max-width: 1440px) {
  tw-story { font-size: 140.625%; }
}

@media screen and (max-width: 1600px) {
  tw-story { font-size: 156.25%; }
}

@media screen and (max-width: 1680px) {
  tw-story { font-size: 164.06%; }
}

@media screen and (max-width: 1920px) {
  tw-story { font-size: 187.5%; }
}

So in theory, this should make the story look about the same on every screen. I only tested it on 1280 and 1366 so far. Not bad though I think.

The only problems I could foresee are the text being too small too read on phones and so huge you'll need to push your chair a meter back for 1920.

Silvanoshei

Did some more testing and my nice theory doesn't seem to hold up at all in practice. 1024 makes the letters way too big and 1920 doesn't make them as big as it should (see attachments). Not sure why this is, but at least I've got working CSS that can be tweaked now.

greyelf

I noticed that your point breaks are (mostly) desktop based screen resolutions widths.

Supporting Mobile devices (phones/tablets) can be a little more difficult because there are many different screen resolutions and the resolutions used can differ based on county. It is also difficult because (as I stated before) the mobile's web-browser can override the font-size you specify.

The main page of the mydevice.io website I linked to in my first link shows information about your current device (desktop/mobile)

Silvanoshei

I used this table to find common screen widths. Now I'm looking at this again, I guess I should add 568, 640, 800 and 900 for people holding their phone sideways.

Do you know if there's any way to work around the problem of font sizes being overridden on some mobile browers?

Silvanoshei

I just realised what an idiot I was. I guess staring at the same problem for hours on end doesn't help. Looking at it this morning I figured:

of course the 100% value is the standard value which is 1.5 (instead of 1024's 1.2)
so 1% is 1.5/100=0.015
so 1024 is 1.2/0.015=80%
(1024/80)100=1280 is the “standard” format

that means that every resolution should be divided by 12.8 to find the desired percentage. On the far ends of the spectrum this means that 320px screen width requires 25% font-size and 1920 150%.

@media screen and (max-width: 320px) {
  tw-story { font-size: 25%; }
}

@media screen and (max-width: 360px) {
  tw-story { font-size: 28.13%; }
}

@media screen and (max-width: 480px) {
  tw-story { font-size: 37.5%; }
}

@media screen and (max-width: 568px) {
  tw-story { font-size: 44.375%; }
}

@media screen and (max-width: 640px) {
  tw-story { font-size: 50%; }
}

@media screen and (max-width: 720px) {
  tw-story { font-size: 56.25%; }
}

@media screen and (max-width: 800px) {
  tw-story { font-size: 62.5%; }
}

@media screen and (max-width: 900px) {
  tw-story { font-size: 70.31%; }
}

@media screen and (max-width: 1360px) {
  tw-story { font-size: 106.25%; }
}

@media screen and (max-width: 1366px) {
  tw-story { font-size: 106.72%; }
}

@media screen and (max-width: 1440px) {
  tw-story { font-size: 112.5%; }
}

@media screen and (max-width: 1600px) {
  tw-story { font-size: 125%; }
}

@media screen and (max-width: 1680px) {
  tw-story { font-size: 131.25%; }
}

@media screen and (max-width: 1920px) {
  tw-story { font-size: 150%; }
}

Now the tweaking begins.

James_Purcell

Skipping through because of web design rules.
the smallest a body(paragraph) should be is 1em aka 12pt aka 16px.
You need to remember that certain devices like the iphone can have the screen zoomed.
Also harlow is missing some code that the W3c says should be in place to make it work on multidevice screen size

Silvanoshei

Thanks for the reply. I don't think I get what you're trying to say in this bit though:

James_Purcell wrote: »

the smallest a body(paragraph) should be is 1em aka 12pt aka 16px.

Do you mean that the percentage of font-size should never drop below about 70%? (That makes font-size 1em if you don't change the standard size.) And it that's the case, what exactly would happen if you did? If you could clarify, that'd be great.

James_Purcell

if you drop below 1em then people will struggle to read it.
I also once red that setting it to 1em allows the device to control font size.

greyelf

James_Purcell wrote: »

Also harlow is missing some code that the W3c says should be in place to make it work on multidevice screen size

You may want to create an issue on the Harlowe project website so that whatever W3c says is missing can be addressed.

Silvanoshei

James_Purcell wrote: »

if you drop below 1em then people will struggle to read it.
I also once red that setting it to 1em allows the device to control font size.

I use percentages, because of... well because of this really. I tried going to em, but it didn't work as nicely.

But I'll try and never make it go lower than 1.

greyelf wrote: »

You may want to create an issue on the Harlowe project website so that whatever W3c says is missing can be addressed.

This is something most people will be struggling with, so if would be great it you could report this indeed.

James_Purcell

Silvanoshei wrote: »

James_Purcell wrote: »

if you drop below 1em then people will struggle to read it.
I also once red that setting it to 1em allows the device to control font size.

I use percentages, because of... well because of this really. I tried going to em, but it didn't work as nicely.

But I'll try and never make it go lower than 1.

That is a very nice writeup there.

I once had a website that used em for all unit size's which resulted in a very flexible site but alas i broke it and never solved it