Columns

About this component

Columns align content side-by-side and can include any content component. The default is 2 columns, but there can also be 3 or 4 columns. Be careful when using 3- or 4-column layouts – the content can get really narrow at some screen sizes!

If you want to align an image to the side, use an image sizing and alignment method instead of columns.

Styling

Columns don’t have any decoration (border, background, etc.), but allow for text and other components to display side-by-side across the screen.

How to use for Columns

Use the pcc-columns and pcc-column shortcodes.

Example of Columns

Column 1. This column appears first in the row and will be on top on small screens.

Column 2. This column appears second in the row, in the middle on large screens.

Column 3. This column appears third and will wrap to a second line on medium screens.