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;
}
}