One-half columns in Home Top area…what's the best way?

[rcwatson]

I have the Executive Pro child theme of Genesis. I need to insert two one-half columns in the Home-Top area, with the slider above it and the Home-Middle below it.

I've added two "Text" widgets to the Home-Top area, but they currently display in the one-third column configuration, leaving me with a blank third column. I'd like these to take up 50% each of the width of the Home-Top widget area.

I've tried putting <div class="one-half first"> around the content of the first Text widget and then <div class="one-half"> around the content of the second Text widget. That didn't work. I tried modeling it using Chrome Inspector on the local cache to see if I could make it happen, but the one-half class doesn't seem to work quite the way I want on any of the elements. I even went into the template and tried hardcoding it, but can't figure out how.

What's the best way?

http://stage.custombuiltwindows.com

[nutsandbolts]

If you use column classes, the contents of the two text widgets should be combined. So you'd have one text widget set up like this:

<div class="one-half first">
Content currently in the first text widget
</div>
<div class="one-half">
Content currently in the second text widget
</div>

Hopefully that makes sense!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[rcwatson]

Thanks. Problem is, that just "squishes" it into the first column. Have a look at http://stage.custombuiltwindows.com/

[nutsandbolts]

Find this in your stylesheet:

.home-middle .widget,
.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.3333333333%;
}

And change it to this:

.home-middle .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.3333333333%;
}

That will allow the widget to take up the entire widget area instead of being limited to 1/3 of it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[rcwatson]

Hmm. Problem is that the template and styles seems to assume one always wants the top and middle widgets divided into thirds. Is there a way to differentiate and customize these on an as-needed basis?

[nutsandbolts]

Yes, that's what I was doing above - removing the CSS that makes the home top area divide itself into thirds, but leaving it for the home middle area.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[rcwatson]

Ah, ok. I get it. Just to be sure, I made things very explicit:

.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 100%;
}

.home-middle .widget
{
	float: left;
	padding: 0 2.8%;
	width: 33.3333333333%;
}

It works the way I intended now.

Thanks.

[nutsandbolts]

You may want to check your media queries to be sure it displays okay on mobile, but otherwise I'm glad to hear it's working. I'm going to mark this topic as resolved but feel free to open a new one if needed. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts