Web services

Columns

Columns align content side-by-side and can include any content component. There can be 2, 3, or (in special cases) 4 columns. If you want to align an image to the side, remember to use an image sizing 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.

Responsive behavior

Columns resize based on which Foundation classes you give them. For example, you could have 2 columns on large and medium screens, which resize to 1 column on small screens (this is the most common scenario, and what the columns shortcode is set up to do).

Development info
  • In WordPress, use the pcc-columns shortcode. You can set the shortcode to create 2 (the default), 3, or 4 columns.
  • For making columns in the HTML, learn more about making Foundation columns using the Grid in Spaces. small-x should pretty much always be small-12 (100% width).
  • Don’t use the sizing classes size-percent-50 or size-percent-25. These classes are for sizing images and creating captions, and will italicize the text. Also, columns with these classes won’t float next to each other because they have margin and padding.
  • If you see class="col" and class="col2", don’t panic. These are the old, pre-Foundation columns, and we’re phasing them out.

Columns example

Column 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus a velit ornare rhoncus.

Column 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus a velit ornare rhoncus.