In this tutorial, i’ll give you the CSS code which enables you to use multiple featured posts widgets in the one widget area so they display inline.
By default, many themes only enable you to display multiple posts from the same category in the one widget area however this solution lets to drag in multiple widgets which can be configured differently so they display posts from different categories.
Several members of the StudioPress community asked this question:
I’m trying to change the home middle widget to show TWO categories instead of one. This would be fantastic… I hope someone has an answer, as it’s exactly what I’m trying to do!
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;
}
}Here’s the result of what the code enables you to do showing 2 widgets displaying posts from 2 different categories inline.
And here’s the 2 widgets in the backend.
Here’s the CSS code you’ll need to add at the end of your child themes style.css file before the Media Queries.
Registration Required. Click here to register for full access
Note: The code only works when using 2 Genesis featured posts widgets however you could use 3, 4 or 5 simply by changing the width from 50% to match the number of widgets you want to display inline.
Example: For 3 widgets, you would use 33.3333333%
Another option would be to code a second widget in the front-page.php template file and add CSS to display each widget 50% width.