Sridhar Katakam

Genesis and WordPress Tutorials

Genesis Featured Posts in Executive Pro’s Home Middle section in columns

by Leave a Comment

This tutorial provides the steps to display posts output by Genesis – Featured Posts widget inside Home – Middle widget area in columns in Executive Pro.

Executive Pro’s homepage, as per the theme demo and setup instructions is set to show three different Genesis – Featured Page widgets side-by-side in columns.

If you wish to replace these three widgets with a single Genesis – Featured Posts widget that is set to show three posts, the posts will appear one below the other.

Follow the steps below to make these appear in columns.

Tested in Executive Pro 3.2.3.

Step 1

At Appearance > Widgets, drag a Genesis – Featured Posts widget into the Home – Middle widget area and configure it.

Step 2

Edit style.css.

a) Change (around L1420)

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

.home-middle .widget:nth-of-type(3n+1),
.home-top .widget:nth-of-type(3n+1) {
    clear: left;
}

to

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

/* .home-middle .widget:nth-of-type(3n+1), */
.home-top .widget:nth-of-type(3n+1) {
    clear: left;
}

b) Add

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

    .home-middle .widget-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

}

.home-middle .post {
    padding: 0 2.8%;
}
>