Responsive 4 – 2 – 1 like Outreach Pro

[Peter.Ingersoll]

Hello,

I'm trying to replicate the responsive technique used in Outreach Pro.

There are four widgets in a widget-area / sidebar Home-Bottom (in Outreach Pro). The widgets display four wide. As the window reduces, the widgets go two wide / two tall, then one wide / four tall.

I see CSS that's is part of the technique.

.home-bottom .widget {
	float: left;
	margin-left: 2.564102564102564%;
	width: 23.076923076923077%;
}

.home-bottom .widget:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}

I don't know if anything else is involved. I'd really like to make this work. I'm currently using column classes. I can only go four wide to one wide.
http://cornellscottproud.org

I'm using Genesis Featured Widget Amplified. I also changed the name of the widget area to the one I'm using in my Dynamik Genesis child theme.

Suggestions please?

- Peter

http://cornellscottproud.org

[Susan]

As you posted this a while back, I hope you were able to get it resolved. If not, please report back, and I will escalate for you.

Thanks!

[Author]

Posts