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 a maximum width set for column sets with 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 full-width-no-gap 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, it 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 element to a max width of 1420px |
container--medium | Restricts element to a max width of 1280px |
container--small | Restricts element to a max width of 950px |
full-width | Removes maximum width from column set so it stretches the full width of the page at larger screen sizes |
full-width-no-gap | Removes maximum width, gap, and padding from column set so it takes up the entire width of the screen with no white space |
mobile-full-width | Sets the single column or column set to take up the entire screen width at mobile screen sizes |
mobile-show-one-column | Displays only the first column at mobile screen sizes, hiding all other columns |
no-gap-no-padding | Remove all gaps and padding from column set |