Full Width Responsive Columns

The widget creates three responsive columns each of which is contained in a div with a percentage width. Adjust the browser width to see the responsive action..
The column width is set to no greater than one third of the page content width and a minimum height can be set which, in this case, also adjusts the optional vertical spacer height.
The text alignment and some of the heading styles can be set individually for each column as can be seen in the example below.


EverWeb Widgets
1204, Nightmare Drive,
GT 98034
Phone: 111 222 3333
More Info


EverWeb Widgets
© Roddy McKay - 2016
All Rights Reserved
Copy cats will have their tails removed.
You have been warned!


It may be hard to believe but I never - not ever - take responsibility for anything I do or say.
I can't be held liable for anything at all due to my irascibility, apathy & undeniable insanity.

Full Width Columns widget
Full Width Columns Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the maximum width.
Set the width and minimum height for the columns.
Enter the heading if required and the text for each column using <br> for line breaks.
Set the back ground and its opacity if required. Otherwise, set the background opacity to zero.
Set the separator width, style and color if required and adjust the top/bottom and left/right padding.

Full Width Columns Widget
Full Width Columns Widget

Font Styles

Enter the font family name, check the box if it is Google hosted, choose a suitable web safe fallback font and set the overall font color.
Set the font size, style and weight for the headings.
Set the text font size and adjust the line height if required.

Column Styles

For each column, set the heading color, text align and text decoration and the paragraph text align.
Links can be created using this code…

<a href="#">Link Text</a>

… and then set the link color, text decoration and hover color in the widget settings.

Position & Animation

To fix the columns when using with a scroll over layer, check the "Position fixed" box in the Metrics inspector.
To allow fade on scroll animation, check the box and set the scroll distance.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width