How to: Clear Genesis Column Classes

Clearing Genesis Column Classes with a simple div and minimal CSS changes. A simple clear fix with code snippets for the Genesis 2.0 WordPress Framework.

One of the cool things about the Genesis framework is the support for custom column classes. However with varying column heights you might find content below the columns is out of place. Thankfully the fix is pretty simple.

To add say a three column section you can do this:

Let’s see what happens…

This is some text beneath the columns.

Not cool

That paragraph text is now floating under our third column. Not what we wanted at all.

Clear Genesis Column Classes: The solution

Add a div with a class name of “clear-line”. (To Keep it in-step with the Genesis 2.0 Demo Columns example page.).

Then add the following to your CSS file. I put mine just before the media queries.

The proof is in the pudding

This is some text beneath the columns.

I hope this helps!

I hope this article is of some help to anyone using column classes in Genesis. Please let me know if you can improve on this solution!

Comments

  1. Lang Elliott says

    Richard:

    When I employ the clear-line class on my website, I get a visible line.

    http://miracleofnature.org/vignette/sample-vignette-980-column

    Any idea why?

    • Rich Senior says

      Hi Lang,
      The visible line is being created by this style rule on your website:


      .clear-line {
      border-bottom: 1px solid #ddd;
      clear: both;
      margin: 0 0 25px;
      }

      You could change it to this:


      .clear-line {
      border-bottom: none;
      clear: both;
      margin: 0 0 25px;
      }

      Hope this helps.
      Rich

  2. Jorge says

    Hi Richard, just wanted to say thanks for the fix!! i had been compensating with what is most likely a bad prectice inserting line breaks!! this is great. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>