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!
Google+
Richard Senior
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?
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
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!