By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,630 Members | 1,126 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,630 IT Pros & Developers. It's quick & easy.

Media Queries not being used by browsers

P: 97
I don't know why my media queries aren't working. I use them the same way with every app, only this time the media query for desktop devices isn't working.

The browsers (getting the same problem in Chrome, IE & FF) get the styles for mobile and tablet devices, but the third media query on my file isn't being applied. I checked the page source and the file is attached and the three media queries are in the stylesheet, but the third media query isn't being applied.

I'm compiling from Sass and I get a green light when I save, meaning that the files are compiling correctly. I have a little JS function that removes some text for certain device widths, but I tried removing that and nothing changed.

Here's the code I'm using as the actual media queries:

Expand|Select|Wrap|Line Numbers
  1. @media all and (max-width: 321px) {
  2. // Styles here
  3. }
  5. @media all and (min-width: 321px) and (max-width: 780px){
  6. // Styles here
  7. }
  9. @media all and (min-width: 780px){
  10. // Styles here
  11. }
And this is the viewport metatag:

Expand|Select|Wrap|Line Numbers
  1. <meta name='viewport', content='width=device-width, initial-scale=1'>
Oct 19 '15 #1
Share this Question
Share on Google+
1 Reply

P: 97
This is sooooooo embarrassing, but I have no other option than to fess up; I'd changed all my classes to id's, as it seemed more semantically correct, but I forgot to change my dots to hashtags in my stylesheet.

I wish I could delete this question as this is just ...
Oct 20 '15 #2

Post your reply

Sign in to post your reply or Sign up for a free account.