For example "html5-respond.js" will not be able to see:

@media all and (min-width: 480px) {
  #main {
    padding-top: 3em; /* Move all the children of #main down to make room. */
    position: relative;
  #navigation {
    position: absolute;
    top: 0; /* Move the navbar up inside #main's padding. */
    height: 3em;
    width: $zen-grid-width;

This is because when "Aggregate and compress CSS files" is disabled stylesheets will be included thus:

  @import url("");

However when enabled they will be included thus:

<link type="text/css" rel="stylesheet" href="" media="all" />

Respond only looks at stylesheets added with a link tag and not those @import with a style tag.

Proposed resolution

- Make respond support @import rules (
- Document that this is a known issue on the Zen project page summary or associated documentaion

Respond.js has a nice piece of text on their project page summary entitled "Hey, this thing isn't working!!" that describes this issue.

#1 respond.js_.warning-1608216.patch1.34 KBgaele
Members fund testing for the Drupal project. Drupal Association Learn more


gaele’s picture

Status: Active » Needs review
1.34 KB

This adds a warning to the theme settings page: "Respond.js will only function if CSS agregation is enabled."

gaele’s picture

And I've added a doc page: (copied from the respondjs module page).

dmatamales’s picture

Thanks for the info.

IE 7/8 are still a pretty big deal. I assumed something was wrong with my setup and was tearing my hair out trying to get it to work.

I wish this was a bit more prominently mentioned somewhere until the next build when the warning patch in #1 will hopefully be included. I don't think an additional message on the project page would be too out of line.

echoz’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Copy paste fixed