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' ); |
|
@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%; |
|
} |
|
} |
|
|
|
} |