This tutorial shows you how to modify any widget area in any Genesis child theme which uses flexible widgets. You can use CSS Grid to display any number of widgets in columns.
In this example, we’ll modify the front page 2 widget area in the Infinity Pro child theme by StudioPress so it displays each widget in a column like this :
There’s 2 steps :
Step 1 : Modify the PHP code located between lines 72 – 75 from this :
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section flexible-widgets widget-area fadeup-effect' . infinity_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
'after' => '</div></div></div>',
) );To this :
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="solid-section widget-area fadeup-effect"><div class="wrap"><div class="container">',
'after' => '</div></div></div></div>',
) );This removes the flexible-widgets class and infinity_widget_area_class function which controls the classes for the flexible widgets CSS.
Step 2 : Add the following CSS to the end of your child themes style.css file and clear caching :
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat( 5, 1fr );
}
@media only screen and (max-width: 960px) {
.container {
display: grid;
grid-template-columns: 1fr;
padding: 20px;
}
}Add support for CSS Grid in Internet Explorer if you wish ( Untested ) :
.container {
display: grid;
display: -ms-grid;
grid-gap: 10px;
grid-template-columns: repeat( 5, 1fr );
-ms-grid-columns : 1fr 1fr 1fr 1fr 1fr;
}
@media only screen and (max-width: 960px) {
.container {
display: grid;
display: -ms-grid;
grid-template-columns: 1fr;
-ms-grid-columns : 1fr;
padding: 20px;
}
}Change Number Of Widgets
To display more or less than 5 widgets, change the number 5 in this line of the CSS :
grid-template-columns: repeat( 6, 1fr );The above example will display 6 widgets in columns as long as 6 widgets have been added to the widget area. Otherwise, another option is to use minmax like this :
Auto Fit
Another option is to use minmax.
Replace this CSS declaration :
grid-template-columns: repeat( 5, 1fr );With this :
grid-template-columns: repeat( auto-fit, minmax( 15ch, 1fr ) );Or this :
grid-template-columns: repeat( auto-fit, minmax( 200px, auto ) );This automatically fits the number of widgets to the container regardless of how many widgets are added to the widget area so no need to modify the CSS.
Leave a Reply
You must be logged in to post a comment.