Xidipity

Knowledge Base

auto columns
Template: Auto Columns
Xidipity WordPress Theme Knowledge Base Template Content Header Image

The purpose of this template is to display content in multiple columns and format the columns to the available space.

 

Appearance

Framed
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio et purus sollicitudin mattis. Quisque erat ipsum, efficitur quis elementum quis, commodo eget tortor. Integer bibendum vestibulum porttitor.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio et purus sollicitudin mattis. Quisque erat ipsum, efficitur quis elementum quis, commodo eget tortor. Integer bibendum vestibulum porttitor.

 

Vestibulum ullamcorper sodales fermentum. Curabitur faucibus lorem et consequat vehicula. Nulla sed mauris velit. Sed maximus varius eros sit amet condimentum. In rhoncus turpis sed est interdum faucibus.

 

Unframed
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio et purus sollicitudin mattis. Quisque erat ipsum, efficitur quis elementum quis, commodo eget tortor. Integer bibendum vestibulum porttitor.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio et purus sollicitudin mattis. Quisque erat ipsum, efficitur quis elementum quis, commodo eget tortor. Integer bibendum vestibulum porttitor.

 

Vestibulum ullamcorper sodales fermentum. Curabitur faucibus lorem et consequat vehicula. Nulla sed mauris velit. Sed maximus varius eros sit amet condimentum. In rhoncus turpis sed est interdum faucibus.

 

Template

Framed
<!--  wpX:AUTO/COL/FRAMED -->
<table class="bdr:bas+3 bdr:so-2x bkg:tint-bas cnr:arch-sm html:box pad:+0.5" style="width: 100%">
  <tbody>
    <tr>
      <td id="hg08j" style="column-count: auto; column-width: 320px">#content#</td>
    </tr>
  </tbody>
</table>
<!-- /wpX:AUTO/COL/FRAMED -->
Unframed
<!-- wpX:AUTO/COL -->
<table class="html:box mce[tint:bas]" style="width: 100%">
  <tbody>
    <tr>
      <td id="3bjaj" style="column-count: auto; column-width: 320px">#content#</td>
    </tr>
  </tbody>
</table>
<!-- /wpX:AUTO/COL -->
 

​Template may scroll horizontally in some circumstances.

Marker

#content#Replace this marker with the desired content.

 

Installation

Steps
  1. highlight & copy template to clipboard
  2. click the line in your content where the template will be placed
  3. click the toolbar insert template (  ) icon
  4. paste clipboard into the tool
  5. click OK to insert
  6. click #content# marker to edit
​Notes

This template is a great solution when the desire is to display content in multiple columns and the author is satisfied to let the browser do the work. The solution is responsive which means it will adjust the number of columns to fit the available screen size.

 

If the desire is to define the number of columns displayed, replace the style attributes ” column-count: auto; column-width: 320px ” with ” column-count: x ” where “x” is the number of columns to display. Be aware this change will remove responsiveness and the template will display the specified columns on all devices.


  • Since: v1.1.0

 

September 25, 2022