Responsive Design for IE8 & below using respond.js and an Omega subtheme

Internet Explorer 8 and below do not support media queries on their own, an essential requirement for creating Responsive websites. The 'respond.js' script by Chris Jehl solves this problem, however it doesn't work off-the-bat with an Omega sub theme.

Assuming you have an Omega sub theme installed and using the responsive grid, download and enable the respondjs module. The respondjs module won't work at all with CSS Aggregation/Caching disabled, so to start with visit admin/config/performance and enable caching.

Next, place the following code in your Omega subthemes template.php file, replacing omega_subtheme with your theme name. Thanks to zipymonkey for providing this fix in http://drupal.org/node/1272812#comment-5946156.

<?php
function omega_subtheme_css_alter(&$css) {
    foreach ($css as $key => $value) {
        if (preg_match('/^ie::(\S*)/', $key)) {
            unset($css[$key]);
        } else {
            $css[$key]['browsers']['IE'] = TRUE;
        }
    }
}
?>

The awesomeness of Omega should now be working within IE8 & below!

Add new comment

Wysiwyg public

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.