Responsive 3 Columns
The widget comprises an HTML5 section element contained and centered in a 100% wide div.
The main heading and this text stretch the full width of the section and is used for extra info about the contents of the columns.
The responsive columns are equal width and contain an h2 heading, an optional image which can be configures as an internal hyperlink if required and a text block.
The widget has an optional footer so that it can created a fully responsive page when combined with a suitable header/navigation. It can also be used below one or more full width, fixed height elements like the HERO widgets.
The footer has options to turn on auto update of the copyright year and a smooth scroll, back to the top chevron tab.
This text - and the heading that preceeds it - are optional. Their position can be switched so that they appear below the columns if requried.
Three 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 has a maximum width setting to stop the columns 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.
This column does all the tricky stuff using CSS3 media queries.
On computers and tablets in landscape mode, it appears the same as the other two.
When viewed on a tablet in portrait mode, it slides down below the columns to the left.
The image is floated left and has its width set to 50% so that the text wraps it.
When viewed on a mobile phone, all three article elements become 100% wide and the image in this column expands to 100% to prevent the text from wrapping around it.
If viewing this page on a computer, reduce the browser width to see these changes take place of view the page or open the page in the iOS Simulator.