In the previous post, we talked about Responsive Web Design under Drupal. We approached the issue from an angle that will not work for you if 'Aggregate and compress CSS files' is enabled. Throughout this article we are going to talk about two new approaches to avoid this problem as well as the use of conditional style sheets for bypassing the Internet Explorer 6-8 issues with media queries.

Although the content of this article applies to the CTI Flex theme specifically, it might be useful for use with other Drupal themes.

Two new approaches...

As you can read in the previous article, we put 'cti-flex-responsive.css', the file responsible for making the site responsive web, at the end of the 'stylesheets[all]' array in order to cascade through the style sheets properly. Unfortunately, this approach only works if 'Aggregate and compress CSS files' is not enabled. How would we be able to bypass this problem?

We would be able to bypass this problem if all the style rules for specific devices were not imported by using @import in 'cti-flex-responsive.css'. Instead of doing that, we could paste them into the block declaration for each media query we wish to use. For example, if we wanted to use a particular background-color, we would be able to do so like this:

/* Phone */
@media only screen and (max-width: 480px) {
  body {
    background-color: red
  }
  /* all your style rules declarations for smart phones go here. */
}

/* Tablet */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  body {
    background-color: green
  }
  /* all your style rules declarations for tablets go here. */
}

/* Desktop */
@media only screen and (min-width: 1024px) {
  body {
    background-color: blue
  }
  /* all your style rules declarations for desktop computers go here. */
}

Another approach would be to declare the media queries by using arrays in the 'theme.info' file like this:

stylesheets[only screen and (max-width: 480px)][] = css/mobile.css

stylesheets[only screen and (min-width: 481px) and (max-width: 800px)][] = css/tablet.css

stylesheets[only screen and (min-width: 1024px)][] = css/desktop.css

Likewise, you can also use conditional style sheets in order for the site to bypass the Internet Explorer 6-8 issues with media queries:

stylesheets-conditional[lt IE 9][all][]  = css/ie6-8.css

Microsoft’s browsers less than version 9 do not support media queries, so we have to provide a style sheet in order for them to display our site properly.

Finally, if you do not want to get your hands dirty with code, there is an amazing theme called Omega that will make the hard work for you. It's worth to take a look at it.