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%; | |
| } | |
| } | |
| } |
Join Our Team at CultivateWP
We design and build high-performance custom WordPress themes for market leading web publishers. We're looking for designers & developers to join our team.
