• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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:

featured-posts-inline

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:

full width

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.

Related Code Snippets

  • Genesis Page Template With Multiple Loops For Pages & Posts With Featured Image Hover Overlay
  • Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

CSS Grid Columns Genesis Featured Posts

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.