Using mdia queries for a responsive web design

Responsive Web Design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience, such as easy reading and navigation with a minimum amount of resizing, panning, or scrolling. RWD is meant to be used across a wide range of devices (from mobile phones to desktop computer monitors).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

This means in order to make your website responsive and work well with different devices, we should think about considering the RWD approach.

The key element to make your application responsive is to use media queries effectively. Unfortunately, the ADF skin CSS file doesn't support media queries tag, which means we need to work with a native CSS file to add the media queries.

In this recipe, we will create another page template, which has two facets:...