Two Responsive 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. The footer can have a contrasting background color to provide visual separation from the content area.
This text - and the heading that preceeds - it are optional. Their position can be switched so that they appear below the columns if requried.
Each column is created using an HTML5 article element. This means allows the heading to be an h1.
The image is optional and has alt text for SEO. It can be configured as a hyperlink to an internal page checking a box and choosing the page with the "Link to:" control.
The text is entered as HTML so line breaks are created using <br>. Refer to the Info section for more details and how to use HTML for special characters.
Text hyperlinks can be created as described in the Info section and can be styled for color, hover color and text decoration.
Since the item created by the widget is responsive - and the page will be viewed on touch devices like the iPad and iPhone - the links have been given a suitable amount of top/bottom padding to make them an easier target for fingertips.
The widget has a control for maximum width to stop the columns from getting too wide when viewed on large screens with a wide browser width.
This also prevents the images from expanding too much with a subsequent reduction in quality. The images should be imported into EverWeb at a width equal to half the maximum width setting.
The columns are equal width and sit side by side when viewed on computers and tablet devices. When the page is loaded onto a mobile phone in portrait mode, the right column slides down below the left one and they both become full width.
Changes like this are implemented using CSS3 media queries. These change the layout at break points which are set to slightly more than the screen width of the targeted device.
If viewing this page on a computer, reduce the browser width to see the layout change or use the browser's responsive mode.