Media Queries not being used by browsers

[tdrsam]

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:

@media all and (max-width: 321px) {
// Styles here
}
 
@media all and (min-width: 321px) and (max-width: 780px){
// Styles here
}
 
@media all and (min-width: 780px){
// Styles here
}
 

And this is the viewport metatag:

<meta name='viewport', content='width=device-width, initial-scale=1'>
 
 

[tdrsam]

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 ...