1

I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.

I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.

The media query that it uses once it hits 720px is

@media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
    .column(12);
    margin-bottom: 1em;
}
}

and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.

Any idea what the problem might be?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Andy
  • 1,422
  • 5
  • 27
  • 43

1 Answers1

1

The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:

<meta content="width=device-width" name="viewport">

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • That fixed the mobile problem, thanks. It still doesn't snap correctly when I resize the webpage in Firefox on my desktop but, oddly, does in Chrome. – Andy Oct 04 '12 at 08:28