Advanced Elements - Using Shortcodes with Best Practices
C - Columns
Columns can be used to order content on your page in a stylized but accessible manner. The purpose of using columns, rather than inserting a table for example, is that columns will re-size and re-arrange according to screen size. This makes your content easily readable on all devices and more accessible.
Column content appears on the page as follows:
Column 1 Heading
This is the content of Column 1. This content takes up one third of the width of a standard full width computer screen because it has a weight of "4" and columns should always add up to 12.
Column 2 Heading
This is the content of Column 2. When the browser window is reduced to a medium or small display or when this page is opened on a mobile device, this column will automatically shift down below Column 1, creating a single-column of three rows on smaller screens.
Column 3 Heading
This is the content of Column 3. Note that I have used headings for these columns. This is important to break up the content for viewers so that they can discern the difference between the three columns. Using images here can help as well.
In your text editor - this content looks as follows:
- Columns are mainly styled by width. A common usage of columns is to create a two-column display with an image. When using two-columns, be sure your columns add up to 12.
This is an image of hands typing on a laptop keyboard. Laptops are a form of personal computer, or microcomputer, which are the most common computers in usage today (Wang 2020).
In your text editor, this content looks as follows:
