This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
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.
Goal
Make your theme responsive.
Prerequisites
You will need the following knowledge and skills. If you need a review, check out the Additional resources section at the bottom of this page.
- Know the fundamental concepts behind responsive CSS.
- Familiarity with existing libraries which offer responsive CSS.
- 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.
Recap
- 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.
Further your understanding
- Continue to the next lesson: Movie Project: Alter a Node with a Custom Module.
Additional resources
- Responsive Web Design Basics (developers.google.com)
- Video: Getting Started with Responsive Web Design in Drupal series (Drupalize.Me)
- Zen Grids: Sass Responsive Grid System (zengrids.com)
