Hi there,
I'm writing a story using the story format Snowman and I'm having trouble with the CSS for mobile.
The story is now at
http://start.freealmada.net (in Portuguese)
I've added the following styles, but it doesn't seem to work:
@media only screen and (max-width: 500px) {
#passage, body {
font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 40px;
color: #e0f6f6;
background-color: #191C1E;
}
}
Can anyone help?
Thanks!
Comments
I placed your CSS into a Snowman based story and viewed it in a browser view-port with a width of 500px or less.
The text appeared in a Helvetica font that was 40px bold, the text was white(ish) on a dark background.
I'm using Chrome for Android 4.3 on a Samsung SIII.
On my end the font is really small. I previewed the page with https://www.responsinator.com/ but what I see there doesn't match my phone.
? ...
Thanks again
Screenshots of Chrome attached.
EDIT: Oh, I checked out that responsinator.com (using the latest versions of Chrome and FireFox for Windows 7) and no, as you could tell, it doesn't look anything like an actual iPhone6 using Safari or Chrome. So, I checked another regular 'ol page and it looked nothing like it, either.
Looks like that Responsinator site is junk.
Sorry for the delay in replying and thank you so much for your answers.
I have now made a new page at http://movimento.freealmada.net/ , and changed the media selector to (max-width: 750px).
On my Samsung SII the font still doesn't change.
Any clues on how to style the passage so that it becomes responsive?
(Additionally, if you could let me know how to add web hyperlinks on Snowman Twine 2, I'd really be grateful. I've looked everywhere and tried a few suggestions mentioned in the forums, but can't seem to make a link to google.com, for example.)
Thank you again!
When you test are you holding your Samsung SIII phone in portrait or landscape mode, because if you are holding the phone in landscape then the width would be 1280px. (based on information in the link I supplied above)
You can create a URL based link in Snowman 2 as follows: