Blog

This could also be titled as "Help! My site's layout looks super busted in IE8!"

Basically, respond.jswill add support for media queries in IE8 and below. The  CleanSlate Toolkit comes with respond.jsalready linked up in views/layouts/default.html. That said, you must serve the global stylesheet from within your theme in order for it to support media queries (instead of from http://code.wvu.edu...). This is one of the known caveats of the respond.js library.

Step by step, here you go:

1. Open /views/layouts/default.htmlin your CleanSlate theme. The link to the global stylesheet will be there. It'll be something like <link href="//code.wvu.edu/stylesheets/global-stylesheet/4.0/stylesheets/global.css" rel="stylesheet">.
2. Copy the URL and paste it into your browser. You may have to add http:at the beginning.
3. Once you see the styles from the global stylesheet, select all and copy them to your clipboard.
4. Create a new file in your text editor and paste the styles into this new file. Name it something like global-v4.cssand save it in your stylesheetsdirectory.
5. Now, delete link href="//code.wvu.edu/stylesheets/global-stylesheet/4.0/stylesheets/global.css" rel="stylesheet"from default.htmland add the new file to your stylesheet call. It should look something like this: r:include_stylesheet name="global-v4, styles".
   • NOTE: Order matters here. Be sure to put this file at (or near) the beginning.
6. Refresh the page in IE and your layout issues stemming from the global stylesheet will be resolved.

Disclaimer: This will not solve all your IE issues, but will enable IE to read media queries.