I created a loop in my archive page displaying the posts in 3 columns (33% width) inside a row with 100% width. Each column is a post.

What I would like to achieve is to make the loop more flexible for smaller screens: 2 columns of 50% inside the row container for tablets then 1 column of 100% for mobiles. My main problem is, I need the posts inside the row container. So It would be: a row with 3 columns, then a row with 2 columns and a row with 1 column.

This is the code of the loop:

<!-- Start the Loop -->
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>

  <?php get_template_part( 'template-parts/content', 'archive' ); ?>

  <?php if( $wp_query->current_post % 3 == 2 ) : ?>

 </div>
 <!-- row -->

 <div class="row">
 <?php endif; ?>

<?php endwhile; ?>

Any help would be much appreciated, thanks!

I created a loop in my archive page displaying the posts in 3 columns (33% width) inside a row with 100% width. Each column is a post.

What I would like to achieve is to make the loop more flexible for smaller screens: 2 columns of 50% inside the row container for tablets then 1 column of 100% for mobiles. My main problem is, I need the posts inside the row container. So It would be: a row with 3 columns, then a row with 2 columns and a row with 1 column.

This is the code of the loop:

<!-- Start the Loop -->
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>

  <?php get_template_part( 'template-parts/content', 'archive' ); ?>

  <?php if( $wp_query->current_post % 3 == 2 ) : ?>

 </div>
 <!-- row -->

 <div class="row">
 <?php endif; ?>

<?php endwhile; ?>

Any help would be much appreciated, thanks!

• php
• loop
• responsive
• columns

1 Answer 1

You can control this with media queries in CSS.

@media screen and (max-width: 768px) { div.row { width: 50%; } } /* for iPad */

@media screen and (max-width: 600px) { div.row { width: 100% } } /* for mobile phones */

I hope this helps.

UPDATE: You can't do this with PHP because PHP is executed on the server before the content is delivered to the browser, so there is no time for PHP to determine which device or viewport is in use. Have a look here.