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!