Responsive design layout pattern – Column drop
In the image above, four zones are shown. In the “Column drop” layout pattern, a zone moves to a new and its own “row” when the minimum width for that …
Responsive design layout pattern – Mostly fluid
In the image above, six zones are shown. In the “Mostly fluid” layout pattern, a zone is moved to a next row when there is no more room for its …
Responsive design layout pattern – Header and Footer
The screen consists of 3 areas: The top container (Header). The content container. The bottom sidebar (Footer). The width of the sidebars is a percentage of the screen width. This …
Responsive design layout pattern – Horizontal centered
This layout pattern has one main container which is always centered horizontally. The main container can contain other containers. There are 4 variants for this layout pattern: Horizontal centered fixed …