Responsive 4 Columns
The columns sit side by side when viewed on conputers and tablet devices in landscape mode. On tablets in portrait mode and mobile phones in landscape mode, columns three and four slide down below one and two. On mobile phones in portrait mode the columns are stacked vertically.
If viewing this page on a computer, reduce the browser width to see the layout changes. To see how the layout looks on various devices, use the browsers responsive mode or the iOS Simulator.
Four equal width columns are inserted into a responsive HTML5 section element.
Each column is created with an HTML5 article element.
Since it is an HTML5 element, the centered heading is an h1.
Next, a 100% wide image is inserted. This has the option to be configured as an internal hyperlink
The image is followed by a paragraph for descriptive text.
Text is entered using HTML. See the INFO for more about this and how to create line breaks, font styles and special characters.
The section is centered in the browser and has a maximum width setting to stop it getting too wide when viewed on a computer with a wide browser setting.
The optional built in footer allows the widget to create a responsive page - or the last part of the page when placed below full width, fixed height items such as those created by the Hero widgets.
The footer has options for auto copyright year update and a smooth scroll to the top function.
Text hyperlinks are created using HTML. See the INFO section for more about this and note how these hyperlinks have extra top/bottom padding added to make them mobile compatible.
Columns were very popular for newspaper layout because they allow a large amount of info to be broken up into manageable sections.
When the page is viewed on a computer and all the columns are inline, the visitor can quickly compare four items and decide which is relevant to their needs.
Columns in print media often used justified text to give a neat appearance. This is very outdated thinking since it is now known that justified text causes problems for those with reading difficulties.
It should be obvious that justified text has no place in modern web design!
Responsive layouts use percentage widths for items rather than a fixed number of pixels. This allows images to respond to changes in the browser width and for text to flow and adapt to the size of the container width.
In the case of the four column layout, each one has a 25% width when viewed on computers, 50% on tablets and 100% on computers.
These changes are implemented using media queries. These allow changes to any CSS selector at a certain screen or device width. The width at which the layout change takes place is the Break Point.
Break points are chosen to suit different devices. For example, 1059px will bring about the change when the page is viewed in an iPad in landscape mode and 799px when it is viewed in portrait.