Content Classes Not Behaving

[paulag01]

I am using Showcase Pro theme and I have successfully used column classes before, but for some reason I cannot get them to have equal height or clear before the next row of columns.

My HTML looks as follows:

Most clients come to me to solve one or more of the following problems:
<div class="one-third first column-gray">

Choosing What to Use

There are a plethora of tools out there to use. How do you know which one to choose? I can help you define, evaluate, and choose based on your unique business needs.

</div>
<div class="one-third column-gray">

Setting up the Basics

There is no “one-click” anything despite what you read out there. From initial configurations to importing data, I can help you get it set up right from the get-go.

</div>
<div class="one-third column-gray">

Integrating Strategy & Tools

We start with your business strategy first, then choose the right tool for the job. Once set up, I help you plan and execute the best way to utilize the tools to reach your goals.

</div>
<div class="clearfix"></div>
<div class="one-third first column-gray">

Learning How to Use It

While technology is far more accessible than it was when I first started using it, spending endless hours trying to figure it out is not the best use of your time. I help you understand what you need to know and why you need to know it. Even if you outsource execution to someone like myself, as a business owner you can delegate but not abdicate responsibility for knowing what’s what.

</div>
<div class="one-third column-gray">

Automating the Process

Automation is what machines do best. However, they can only do what you tell them to do. I can help you leverage features and tricks so you can glide gracefully through your days while it does the heavy paddling.

</div>
<div class="one-third column-gray">

Avoiding Headaches

In the last 30 years I've touched hundreds of software programs. As the go-to gal that people throw things at to “figure out how this works”, I know how to move beyond the facade of what a software promises to do and how it really works. I know what questions to ask and how to interpret the answers I receive.

</div>
<div class="clearfix"></div>
<h2>Getting Started</h2>
Want to know more about how I can help you get ahead of the curve with a proven online business infrastructure?

The CSS is standard Genesis column classes. I haven't tweaked anything except adding

.column-gray {
background-color: #dedcdd;
padding: 10px;

}

For the background.

The wonky display is here: http://pgdev.paulagwebdesign.com/services/online-business-infrastructure

I am scratching my head unsure what is broken.

What might I be missing?

Thanks in advance
Paula

[Victor Font]

Genesis column classes have never provided for equal heights. You've got to do that yourself by including a min-height. Also, there is no clearfix class in a Studio Press theme. The class for clearing columns is "first".

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[paulag01]

Thank you Victor.

What I am wondering then is - what is my best way for being able to lay out 3 "boxes" across columns and having more than one row of them? Seems like going back to tables is silly.

This is on page content (I know how I would do it on a home page or something - creating custom widgets).

Seems like I should be able to do this without having to go to the darkside and bloat of a visual builder which I hate.

Sorry if I am being dense... just seems like this should be easier to do for laying out content on a page.

Thanks
Paula

[ᴅᴀᴠɪᴅ]

Flex box is a good way of easily creating equal height columns. You can see an example here, but you;d need to ammend the stylesheet and add your own classes. Genesis isn't a css framework.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[paulag01]

Thank you Dave. This works nicely. I think I need to add some media queries so they drop on top of each other at a certain point (otherwise they just squish away by the time you get to a phone which was never built for side by side display).

Truly appreciate your help.

Back to Genesis Column Class for just a sec though. Forget the even height and all-- how does one get the next bit of content to drop to below however many columns you have meaning.

column 1 (whatever height) column 2 (whatever height) column 3 (variable height)

NEXT CONTENT SHOULD FLOW BELOW ALL 3 Columns (so below the longest of the 3).

It seems it should do THAT, no?

Thanks again
Paula

[Victor Font]

Add a <div class="first"></div> after the column classes.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[paulag01]

Ah I get it! Because a regular flow of text is really just a full width column class (and thus is first).

Thanks much!
Paula

[paulag01]

And this did the trick for letting them flow in mobile

/*_--------------BEGIN FLEX BOX -----------*/

.eq:nth-of-type(odd) {
background: #7FBDE4;
}

.eq:nth-of-type(even) {
background: #FFECC4;

}

.eq {
padding: 10px;
margin:5%;
}

.equalHMWrap {
justify-content: space-between;
}

@media only screen and (min-width: 800px) {

.paddingBlock {
padding: 20px 0;
}

.eqWrap {
display: flex;
}

.eq {
margin:0;
}

.equalHW {
flex: 1;
}

.equalHM {
width: 32%;
}

.equalHMRWrap {
justify-content: space-between;
flex-wrap: wrap;
}

.equalHMR {
width: 32%;
margin-bottom: 2%;
}

.equalHMVWrap {
flex-wrap: wrap;
}

.equalHMV {
width: 32%;
margin: 1%;
}

.equalHMV:nth-of-type(3n) {
margin-right: 0;
}

.equalHMV:nth-of-type(3n+1) {
margin-left: 0;
}

}

/*----------------END FLEX BOX -------------*/

[Author]

Posts