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.
- 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.
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
- 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)