• 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

Modify Flexible Widgets To Display Any Number of Widgets In Columns

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.

CSS Grid Columns Infinity Pro Theme

Reader Interactions

Comments

  1. Ian Forest-Jones says

    October 2, 2021 at 1:00 pm

    Hey Brad,

    I’m using the InfinityPro theme and its on the homepage. In the Front Page 2 section I have a Custom HTML widget to produce some text, then a slider widget for testimonials, followed by a Custom HTML widget for a button. I want the button to be below the testimonials except the layout won’t let me.

    Thanks for your help with this.

    Log in to Reply
    • Brad Dalton says

      October 2, 2021 at 1:12 pm

      Sent via email

      Log in to Reply
  2. Ian Forest-Jones says

    October 2, 2021 at 6:50 am

    I think you have made a mistake with this tutorial. The title should read, “Modify Flexible Widgets To Display Any Number of Widgets Into a Row”, rather than, “Modify Flexible Widgets To Display Any Number of Widgets In Columns”. This creates a row of widgets rather than a column.

    Would you be so kind as to provide a tutorial that creates a single column for three widgets? The flexible layout forces one widget to be followed by two. I want to have three widgets placed one after the other vertically. Can you please help me?

    Log in to Reply
    • Brad Dalton says

      October 2, 2021 at 7:02 am

      Hi Ian. Which theme are you using and which page on your site are you referring to?

      Log in to Reply

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