This is an old revision of the document!
Columns
Use columns to arrange content horizontally at desktop screen sizes. Columns offers a variety of column width options and each column can support it's own unique set of block elements. At smaller screen sizes, columns will stack vertically.
By default, there is padding between each column the sides of the screen. It's common in The Hort's website to remove this spacing, and to do so, the class no-gap-no-padding must be added to the Additional Classes field in the inspector on the column set (be sure the entire column set is selected in the content editor and not the individual column or content within the columns).
Single Columns
Using a single column will result in the default horizontal padding between the edge of the screen and element at all screen sizes. Because of this, is is recommended to nest elements (except additional column blocks) within a single column when not using one of the other custom block types.
Additional Classes
The Additional Classes field in the right hand inspector is likely to be used often with the column block. When applying additional classes, ensure you have the correct element selected in the content editor—it can be easy to incorrectly have an element other than the single column or full column group selected.
The following classes are the most useful for columns:
| Class Name | Effect |
|---|---|
container–large | Restricts the column block to a max width of 1300px |
container–medium | Restricts the column block to a max width of 950px |
mobile-full-width | Sets the single column or column set to take up the entire screen width at mobile screen sizes |
no-gap-no-padding | Remove all gaps and padding from column set |