php - Responsive loop with 3 columns inside row then 2 columns

admin管理员组

文章数量:1334160

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

Share Improve this question edited Jun 9, 2020 at 7:41 Mathieu Préaud asked Jun 9, 2020 at 7:35 Mathieu PréaudMathieu Préaud 20355 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： phpResponsive loop with 3 columns inside row then 2 columns