Media Queries Not Working In IE8?

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.

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Stacie
Stacie
8 years ago

Thank you!!!! You saved me a ton of time and headaches 🙂

James Nickson
7 years ago

Simple Just use conditional Statement to fix it

johnbhartley
johnbhartley
7 years ago
Reply to  James Nickson

It’s not so much about the media query, but the positioning in the <head>. That was the main issue above.

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

3
0
Would love your thoughts, please comment.x
()
x