Genesis Grid – Two Columns on Tablet

Set it to 3 or 4 columns in the Grid Settings. The code in functions.php adds additional classes (‘tablet-one-half’ and ‘tablet-first’) to the posts. The code in style.css makes these posts display in 2 columns on tablet (768-960px) and 1 column on mobile ( <768px).

<?php
/**
* Two column tablet classes
*
*/
function be_two_column_tablet( $classes ) {
// First, we make sure we're in the grid loop.
if( ! apply_filters( 'is_genesis_grid_loop', false ) )
return $classes;
// Add this to all posts
$classes[] = 'tablet-one-half';
// Every other post gets this
global $wp_query;
if( 0 == $wp_query->current_post % 2 )
$classes[] = 'tablet-first';
return $classes;
}
add_filter( 'post_class', 'be_two_column_tablet' );
view raw functions.php hosted with ❤ by GitHub
@media only screen and (max-width: 960px) {
.one-third.tablet-one-half,
.one-fourth.tablet-one-half {
width: 49.166666666667%;
}
.one-third.first.tablet-one-half,
.one-fourth.first.tablet-one-half {
margin-left: 1.6666666666667%;
clear: none;
}
.one-third.tablet-one-half.tablet-first,
.one-third.first.tablet-one-half.tablet-first,
.one-fourth.tablet-one-half.tablet-first,
.one-fourth.first.tablet-one-half.tablet-first {
clear: both;
margin-left: 0;
}
}
@media only screen and (max-width: 767px) {
.one-third.tablet-one-half,
.one-third.first.tablet-one-half,
.one-fourth.tablet-one-half,
.one-fourth.first.tablet-one-half,
.one-third.tablet-one-half.tablet-first,
.one-third.first.tablet-one-half.tablet-first,
.one-fourth.tablet-one-half.tablet-first,
.one-fourth.first.tablet-one-half.tablet-first {
margin: 0;
width: 100%;
}
}
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk