Three Ways to Use Media Queries in Drupal

... and why only one way is best. Using media queries in Drupal is no different than how they are used on any CMS or custom application. But there are a few things to keep in mind before you send your site live. One of the easier ways to try out the media querie on an existing site is to include it in the stylesheet link in your themes info file. The format is exactly how it would be in the media attribute of a link tag. Simply change this stylesheets[all][] = styles/layout.css to this stylesheets[all and (min-width: 960px)][] = styles/layout.css This example will turn the layout.css stylesheet off when the width of the screen is less than 960 pixels. Since you're modifying the info file, you'll need to make sure to clear Drupal's cache before you reload the page. This method is useful if you want to use a media querie but you don't want to alter the original stylesheet. The disadvantage is that when you turn on stylesheet aggregation this file will be pulled out of the aggregated main stylesheet and minified either by itself or with other stylesheets that have the same media querie. If you're trying to keep the number of http requests to a minimum, then you would not want to choose this method. Another method you can use while developing is @import. This will also allow you to call existing css files without modifying the original code. The syntax is exactly the same as you would normally use, but at the end you include your media querie before the semi-colon. This allows you to write a separate stylesheet where you can import all of the existing files without having to modify them. For example, create a file named import.css and then include your original files inside the new stylesheet with @import like this @import url(layout.css) all and (min-width: 769px); @import url(mobile-layout.css) all and (max-width: 768px); next, remove the existing links in your info file and replace them with one statement stylesheets[all][] = styles/import.css Now your stylesheets will be pulled into the import.css file. But this is something you don't want to do when your site goes live. When CSS optimization is turned on, Drupal will include the @import stylesheets into a link tag without parsing them. What does this mean? @import inside a link tag will force the browser to load each file sequentially, greatly increasing the time your styles load. You should never do this on a live production site. It may be helpful while you are building, but once you're ready to deploy you need to use another way. Which leads us to the last method. This last method works the best, the only caveat is you have to edit any existing file your site uses if you want it to be in a media querie. So if there is an update, you'll need to replace the code. The good news is it's simple enough to do, just wrap the @media rule around the entire stylesheet. @media all and (min-width: 768px) { /* all of your styles here */ } You can use any number of media queries in a stylesheet this way. Drupal will not pull them out of aggregation if they don't match. The first two methods are good for testing and early development only. Once you know what your queries are, it would be best to modify the stylesheets so the queries are done internally.