I came across an issue the other day where my media queries were not taking hold in a mobile-first design in older browsers. I was baffled. I had respond.min.js in and that worked every time before this one.
I made changes to my media queries, maybe it was something I did wrong. But no, it was a dumb mistake. The stupidest, stare-at-the-computer-fuming-because-it’s-so-dumb mistake.
Look at this code:
<script type="text/javascript" src="js/respond.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
and now this:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <script type="text/javascript" src="js/respond.min.js"></script>
The difference? Everything. Note that all I did was switch the position of the calls in my file. The second answer is correct and the first will make you pull out your hair. Granted, this was complete user error and you should pretty much ALWAYS call your stylesheets before your scripts, but I digress.
Moral of the story: In order to have the wonderful respond.min.js work, you need to already have some media queries in your file. So if you try to get your polyfills created before you call a media query it won’t work. Style before script. Always (unless someone tells me otherwise, in which case put in the comments below).
Go forth and media query the jones out of that site.
The post Media Queries Not Working In IE8? appeared first on John B. Hartley.
