Sridhar Katakam

Genesis and WordPress Tutorials

How to arrange widgets in columns in Infinity Pro using CSS

by 5 Comments

In the Genesis Facebook group a user asked:

Does anyone know of any links to tutorials on how to make a widgeted area on the Front-Page in Infinity Pro to be 1/3rd width and 2/3rd width columns side by side? I have been going round in circles with it all day and my brain is starting to melt/ Thanks!

We can easily display widgets present in say, Front Page 2 widget area of Infinity Pro in 1/3 – 2/3 arrangement using CSS Grid.

Step 1

In Infinity Pro’s front-page.php remove flexible-widgets CSS class from the code that displays Front Page 2 widget area.

Change

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

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' . infinity_widget_area_class( 'front-page-2' ) . '"><div class="wrap">',
    'after'  => '</div></div></div>',
) );

Step 2

Add the following in style.css:

@media only screen and (min-width: 801px) {
    .front-page-2 {
        text-align: justify;
    }

    .front-page-2 .wrap {
        display: -ms-grid;
        display: grid;

        grid-gap: 100px;
        -ms-grid-columns: 1fr 2fr;
            grid-template-columns: 1fr 2fr;
    }

    .front-page-2 .wrap:before,
    .front-page-2 .wrap:after {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    .front-page-2 .widget:first-child {
        margin-bottom: 100px;
    }
}

Screenshot of the widget area at Appearance > Widgets:

  • Hi Sridar, Thanks, interesting to see use of CSS grid. Why do we need

    .front-page-2 .wrap:before,
    .front-page-2 .wrap:after {
    display: none;
    }

    Is this just to overwrite some other rules for the wrap declared previously by the theme authors? This is a theoretical question, I’m not using the theme, just trying to learn from looking at your code as I so often do.

    Reply
    • >