Internet Explorer 8 – @media screen not working

Problem

CSS IconIf you’re developing a responsive website design using CSS you may have noticed Internet Explorer 8 does not support min or max-width @media queries which means it can not apply CSS according to the window size.

Unfortunately Internet Explorer 8 still being used by many users.

Solution

Fortunately there is an easy fix thanks to some clever adaption of jQuery.

Simply download the respond.src.js file below

Save to your template folder

Then from your HTML template link to it, example below:

<script type="text/javascript" src="template/js/respond.src.js"></script>

 

Download: respond.src.js  (right-click and select ‘save as’)

If you want to see the script, @media queries and CSS3 in action simply change the size of this window. The design will adapt to the space available in the window.