Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

@media queries in Snowman

edited July 2015 in Help! with 2.0
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

  • Could you explain why you believe the above is not working?

    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.
  • HI, thanks for the reply!
    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
  • edited July 2015
    I just checked it out on my iPhone 6 with Chrome 43.0.2357.61 and took a screenshot of portrait and landscape view. I also used Safari and it looked exactly the same as far as I could tell.

    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.
  • Based on this link the SIII has a 720×1280 resolution, if this is correct the (max-width: 500px) part of your media selector will not be true and this would be why the font does not change.
  • @greyelf & @sharpe

    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!
  • I tested your new version in a view-port of 750px or less and again the font changed.

    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:
    [[google|https://google.com/]]
    
Sign In or Register to comment.