Horizontally Display Genesis Featured Posts Inline In One Widget Area

If you add the genesis featured posts widget to 1 widget area, it stacks the posts on top of each other.

Even if you add 3 genesis featured posts widgets to one widget area, the posts still stack vertically rather than horizontally, which is what you want.

In this tutorial, i’ll show you how to display Genesis featured posts horizontally like this:

The CSS code also includes Media Queries so each featured post displays full width on smaller screens.

Update : You can now use CSS Grid to display any number and any type of widget inline. Here’s the CSS which assumes your PHP code which generates the widget includes the class, grid-container.

.grid-container .widget-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
    grid-template-rows: auto;
    grid-gap: 1%;
    margin-top: 80px;
}

@media only screen and (max-width: 1023px) {
.grid-container .widget-wrap {
        grid-template-columns: 1fr;
}
}

Old method

.home-top .featured-content .entry {
        float: left;
    margin: 1%;
    width: 30%;
}

Replace

clear: both;

with

clear: right;

CSS Clear class and float Resources:

http://www.w3schools.com/cssref/pr_class_clear.asp
http://www.w3schools.com/css/css_float.asp

@media only screen and (max-width: 767px) {
.home-top .featured-content .entry {
        clear: both;
        margin: 0 auto;
        padding: 0 0 40px;
        width: 100%;
}
}

Alternative CSS

You could also use this code with different classes which produces the same result and only effects featured posts:

.home-top .featuredpost .entry {
    float: left;
    margin: 1%;
    padding: 1%;
    width: 30%;
}

home-top is the main widget class as you can see in the below PHP code.

Change this class in the above CSS code to match whatever your PHP code includes to call your widget, if using an existing widget.

You can use the CSS on any existing widget or use the PHP code below to create a new widget area.

Here’s the PHP code which creates a new widget area named Home Top once added to the end of your child themes functions.php file:

Full Width Widgets

If you want to display the widgets full width, remove the class for the wrap from this part of the above PHP code:

and your widgets will look something like this:

Tested on the Education Pro child theme by StudioPress and the Genesis Sample child theme.

Video Demo

This video shows what happens after you populate the Home Top widget with the Genesis Featured Posts widget and set it to display 3 posts.

The video also shows you how the widgets display full width once the screen is reduced for mobile responsiveness.

Old method

Alternative CSS

Full Width Widgets

Video Demo

Related Code Snippets

Reader Interactions

Leave a Reply Cancel reply