Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Movie Project: Use Responsive CSS for Drupal 7

  
Last updated February 16, 2017
Theming7.x

In this exercise you will demonstrate that you understand the concept of responsive CSS and the methods which can be used to implement it in a Drupal theme.

Objectives and Prerequisites

You will need the following knowledge and skills. If you need a review, check out the Resources section at the bottom of this page.

  1. Know the fundamental concepts behind responsive CSS.
  2. Familiarity with existing libraries which offer responsive CSS.
  3. Write CSS with media queries.

Tasks

Create a media query to clear the right-hand panel of the homepage under the left-hand panel when the width of the screen is below 500px.

Summary

  • Media queries are the basis of responsive CSS.
  • Column-based layouts allow for a consistent design for a page, and provide a basis for responsive grid systems.
  • There are a wide range of techniques for using responsive CSS and grid systems.

Resources

◀ Previous tutorial Next tutorial ▶
Creative Commons License

Drupal Training Resources by Damian Robinson are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.damianrobinson.co.uk.