Responsive Design problems with Internet Explorer 11

This is my first time going extensively Responsive on a website. I’m currently developing a small blog/website for a client. I have a placeholder up for the site at this point ([www.cofchristslc.org][1]), while I develop the full site on the server with Textpattern ([www.cofchristslc.org/test][2]). I’ve been writing the CSS according to the general conventions of Responsive Design/Mobile First: my css file first lists all the resets, then the mobile rules, and then the rules for each progressively greater breakpoint. The placeholder works fine, just as I intended it, including Responsive aspects, on all modern browsers. The development version of the site also works as intended in Safari, Chrome, and Firefox. However, I noticed today when I checked the site on Internet Explorer 11 on a PC, It ignores all media queries, and sticks with the first/mobile layout. Its acceptable, and what I expected for earlier versions of IE, but perplexing.

The only real difference between the placeholder and the full site CSS files that I’ve identified is that In the placeholder, the media queries are listed @media all and (min-width: [X]px) {, while for the full site, the media queries are listed @media only screen and (min-width: [X]em) {. I’m not sure why the change from px to em or from all to only screen would interfere with IE 11 recognizing the media queries.

I’m not sure what else to even list. Any thoughts on what it might be? Let me know what other examples of my html or css could be helpful in solving the problem, and I’ll share it. Feel free to look at the html at the links I shared, if that might provide any clues.

Thanks in advance for any help!
[1]: http://www.cofchristslc.org
[2]: http://www.cofchristslc.org/test

I’d try fixing your CSS/HTML errors first (HTML isn’t too big a deal since I believe the issue is in your CSS)

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcofchristslc.org%2Ftest%2Fcss.php%3Fn%3Ddefault&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

You should note that // is a javascript comment, not a valid CSS one.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.