I have two stylesheets linked in the head like this...
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="{% static '/mobile-style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 8000px)" href="/style.css">
and then in the sheets I have this:
style.css
body {color:blue;}
mobile-style.css
body {color:red}
But when I load the page I only ever see the style.css sheet and never the mobile-style.css sheet even if I load it in google Chrome's webmaster panel and toggle the device to something with a small screen. I have tries refreshing deleting cache, etc with no luck.
Did I do something wrong here?
Here always apply css in style.css file. Because here you have put media query like below.
@media(max-width: 800px){
}
@media(max-width: 8000px){
}
Here style.css file media is (max-width: 8000px). it's always true for mobile-style.css because it's media (max-width: 800px). So always applya style.css file css style.
Updated Answer...
So, Try something like this
<link rel="stylesheet" type="text/css" media="screen and (min-width: 799px)" href="mobile-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="style.css">