Responsive Columns and Widgets
You often need to organize your content in responsive columns or widgets. They need to scale with the browser and eventually stack differently on mobile devices so individual columns / widgets do not become too narrow.
This tutorial will guide you through existing tools available in Weaver Xtreme to organize your own content in such layouts.
Note: If you have the Xtreme “Plus” Plugin, there is now a very powerful widget called “X-Plus Flex Columns” that can do all this and much more in a much easier manner.
Check its guide article below.
https://guide.weavertheme.com/x-plus-flex-widget-usage-and-customizations/
Responsive columns
Weaver Xtreme has pre styled classes for 2 columns and 3 columns layout.
Below is the HTML code to place in your content editor while in text mode (not Visual)
For 2 columns on desktop and small tablet that become a single column on phone:
<div> <div class="content-2-col">First column content</div> <div class="content-2-col">Second column content</div> </div> <div style="clear:both;"></div>
For 3 columns on desktop that become 2 columns on Small tablets and one column on Phones:
<div> <div class="content-3-col">First column content</div> <div class="content-3-col">Second column content</div> <div class="content-3-col">Third column content</div> </div> <div style="clear:both;"></div>
Note 1:
It is very important to wrap all the columns <div> s with an outer <div> - if you don't, the columns may not layout as expected.
If you want more than one row, you can simply add them within the main container.
For 2 columns x 2 rows on desktop and small tablet that become a single column on phone:
<div> <div class="content-2-col">Row 1 - First column content</div> <div class="content-2-col">Row 1 - Second column content</div> <div class="content-2-col">Row 2 - First column content</div> <div class="content-2-col">Row 2 - Second column content</div> </div> <div style="clear:both;"></div>
For 3 columns x 2 rows on desktop that become 2 columns on Small tablets and one column on Phones:
<div> <div class="content-3-col"> Row 1 - First column content</div> <div class="content-3-col"> Row 1 - Second column content</div> <div class="content-3-col"> Row 1 - Third column content</div> <div class="content-3-col"> Row 2 - First column content</div> <div class="content-3-col"> Row 2 - Second column content</div> <div class="content-3-col"> Row 2 - Third column content</div> </div> <div style="clear:both;"></div>
Note 2:
When using three columns, if you have an odd number or content block (3, 9 …) when the content switches to 2 columns on Small tablets, the last block will be alone on its last row, only occupying half the overall width.
To make the last content block of an uneven number stretch to 100% of the last row, you can use the rule below in the Global Custom CSS Rule Box.
.is-smalltablet .content-3-col:last-of-type {width:100%;}
Note 3: 4 column class
Although there is no predefined 4 column class, you can create your own.
For a simple one row of 4 columns, the HTML would look like.
<div> <div class="content-4-col">Put your first column stuff here.</div> <div class="content-4-col">Put your second column stuff here.</div> <div class="content-4-col">Put your third column content here.</div> <div class="content-4-col">Put your fourth column content here.</div> </div> <div class="clear-cols"></div>
Then add the CSS rules below in the theme Global Custom CSS Rule Box, to define the styling of the new class.
/*-style for 4 columns on desktop*/
.content-4-col {float:left;width:25%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/*-Change to 2 columns on small tablets*/
.is-smalltablet .content-4-col {width:50%;}
/*-Change to 1 columns on Phones*/
.is-phone .content-4-col {width:100%;}
/*-sets the line breaks*/
:nth-of-type(4n+1).content-4-col {clear:left;}
.is-smalltablet :nth-of-type(4n+1).content-4-col {clear:none;}
.is-smalltablet :nth-of-type(2n+1).content-4-col {clear:left;}
If you need more than one row, like before, keep adding more divs with the 4 column class in the HTML, and add the rules below in the CSS
For 4 / 2 / 1 columns use
Note 4: Making 3 & 2 columns styling flush on the left and the right
The way the columns classes are styled is by setting the width of each column then adding a 1% left and right padding to each container.
As a result, there is a 1% space left of the first columns, and 1% space right of the third column.
If you need to have the first and last column flushed with content, then you will need to modify the styling using the rules below
A- 3 columns:
.content-3-col {padding-left:.666%;padding-right:.666%;}
.content-3-col:nth-of-type(3n+1) {padding-left:0;padding-right:1.333%;}
.content-3-col:nth-of-type(3n) {padding-left:1.333%;padding-right:0;}
.is-smalltablet .content-3-col {padding-left:1%;padding-right:1%;}
.is-smalltablet .content-3-col:nth-of-type(2n+1) {padding-left:0;}
.is-smalltablet .content-3-col:nth-of-type(2n) {padding-right:0;}
B- 2 columns
.content-2-col:nth-of-type(2n+1) {padding-left:0;}
.content-2-col:nth-of-type(2n) {padding-right:0;}
Per page widget area and widget_area shortcode
If you want more elaborate widget area in your page, you could use Xtreme per page Widget Area feature.
- First you would create your own custom Widget Area using the Per Page widget area box at the bottom of Main Options > Sidebar & Layout page.
- Once you do that, you can go to Appearance > Widgets, and drop your widgets inside your newly created widget area.
- Then you can insert that widget area anywhere (content, HTML Insertion area …) using the
[widget_area] shortcode (requires "Plus" plugin) as explained in + Xtreme Plus > Widget Area page.
Width layout options:
Right now Per Page Widget areas do not have their own widths style options, but the Shortcode allows you to use one of the Standard Area styles, which can be any of the following: header, footer, primary, secondary, top, bottom
In any of these areas you can set either a number of columns, or a more elaborate set of Custom Widget widths (requires the "Plus" plugin).
Read the post below for more on "Responsive and Adaptive Layouts for multiple widgets inside Widget Areas"
http://guide.weavertheme.com/widget-area-layouts/
So as long as you do not already use all of these areas, you can set a number of columns or custom widget widths in an unused Widget Area options, and use its styling in your shortcode.
[widget_area area='area-name' area_style='NameOfArea']
NameOfArea being of one of: header, footer, primary, secondary, top, bottom
Note:
If you do not have "Plus", or are already using all your widget area styles, you can create any custom widget width layout using this code generator