Media queries & Drupal

This article is pretty old now and may or may not be accurate, please get in contact if you are looking for some help with your Drupal media queries

Media queries are getting more and more popular in web design to allow your web site to change depending on the screen resolution, or screen orientation.

It is very simple to add media queries to your Drupal theme.

To define a CSS file in your Drupal theme's info file you would usually write declarations such as:

stylesheets[all][] = style.css

or

stylesheets[screen][] = style.css

etc

To use media queries you can write declarations such as

stylesheets[screen and (max-width: 600px)][] = screen-600.css

or

stylesheets[screen and (orientation:landscape)][] = screen-landscape.css

You can also define media queries within your CSS file.

@media screen and (max-device-width: 600px) {

}

At Mark Boulton Design we are using media queries within the CSS file on practical-ia.com with Drupal. Give it a try, resize your browser.

Responsive Web Design by Ethan Marcotte is a great article for more information on media queries.

More info about adding style sheets to your Drupal theme.

Looking for some further help with Media Queries, responsive web design or your Drupal theme? Get in touch

Simple SEO PDF guide

Get our latest PDF guide, Simple SEO.

Similar posts

Mailing list

Subscribe for monthly updates, blog posts, and client case studies direct to your inbox.

Twitter