The Genesis Framework is one of the most popular for WordPress. They have a ton of great-looking child themes just waiting for you to add your own creative flair and create a fantastic website. I’ve even used them for some clients as a starting point for their site.
One of my favorite “hidden features” of Genesis is the built-in CSS for columns. I’m a fan of using CSS instead of adding plugins to do it as that just leads to additional style sheets that need to be loaded, which will increase load time and can negatively impact the performance of your site.
They’re pretty easy to use – just add the appropriate class(es) to a div tag surrounding the content you want in columns, like so:
Genesis Content Column Classes at work
<div class=”one-half first”> content</div>
<div class=”one-half’> content </div>
See that extra class on the first one, “first”? That changes the CSS rules regarding the left margin so they line up properly. You’ll need to add that to the first of each div in a ‘row’.
The code above will give you the following result:
Note – because of the way the Dashboard editor works in WordPress, you won’t see the columns there, but they should show corrently on the front end (unless you have an older version of Genesis or the CSS rules have been removed from or changed in your CSS file for some reason.
(Cat Lorem from catipsum.com)
Other CSS Column Classes
Other classes that you can add to your surrounding divs are:
- one-third, two-thirds
- one-fourth, two-fourths, three-fourths
- one-sixth, two-sixths, three-sixths, four-sixths, five-sixths
The can be used in any combination to equal one (remember your fractions from elementary school?) So, you could do one-fourth first, one-half, one fourth. Or one-sixth first, one-third, one-third, one-sixth. Or one-half first, one-sixth, one-sixth, one sixth. See how that works?
If you have a license for Genesis framework, you can get more information on these Genesis CSS Column Classes in the documentation on their site. But you’ll need a login and password, so if you’re web developer licensed the framework for your site and you don’t own the license, you won’t have access to documentation.
Have you used Genesis Columns CSS Classes on your site? Share a link below to show how you’ve used them.
Latest posts by Terri Orlowski (see all)
- Where to find images for your website - February 11, 2018
- Connect your website to Google Search Console - January 26, 2018
- Remove unnecessary themes from your WordPress site - January 19, 2018