0

I'm currently working on a Wordpress loop for my index posts page. The loop displays the posts in 4 columns (each post has a width of 25%, so 4 posts on the same row), my purpose is to insert after every four posts two divs <div style="clear:both;"></div><div style="separator"></div>. For now it's working fine, but I don't find the way to make my PHP code responsive.

For example: when the window width is <=1100px, my posts will have a width (in my css media queries) of 50%, meaning 2 posts on the same row. So I will need to change $counter % 4 == 0 to $counter % 2 == 0, to add the two divs after every two posts.

Here is the code:

$counter = 1;

if ( have_posts() ) :
  while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/content', 'index-posts' );

    if ($counter % 4 == 0) :
      echo '<div style="clear:both;"></div><div class="news-separator"></div>';
    endif;

    $counter++;

  endwhile;
endif;
wp_reset_query();

I'm a newbie in PHP, so I would really appreciate some help on that.

Thank a lot!

  • You can't modify the query based on resposiveness, the display should be handled better in your css – Tunji Jan 5 '17 at 15:42
  • Thank you Tunji! I agree with you, but how would you add the two divs after every 4 posts, would you still use the PHP code? Or is it possible to create something similar in CSS? – Mathieu Préaud Jan 5 '17 at 17:40
  • your question says that part is working...is it not? – rudtek Jan 5 '17 at 17:45
  • @rudtek the PHP is working, it display the divs after every 4 posts. But I can't find the way to make it work after every 2 posts when the browser window is <=1100px – Mathieu Préaud Jan 5 '17 at 17:50
  • Tunji is right about that. You need to set the divs to be 50% via css when by using @media under 1100px. Then they will load at 2 per row. You could also add a class to the code in the separator that it only shows over 1100px and add a 2nd if statement for every 2 that would be hidden on everything over 1100px. seeing as we cant see the actual loop code i can't suggest which divs to apply the css to. – rudtek Jan 5 '17 at 17:53
0

You need to set the divs to be 50% via css when by using @media under 1100px. Then they will load at 2 per row. You could also add a class to the code in the separator that it only shows over 1100px and add a 2nd if statement for every 2 that would be hidden on everything over 1100px. seeing as we cant see the actual loop code i can't suggest which divs to apply the css to

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.