Homepage Posts layout

3 items requires some more editing of the loop, as currently each row wraps articles two-by-two in the list. For that you would need to modify content.php, archive.php and search.php where it says:

<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
<?php get_template_part('content'); ?>
<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>

If you wish to do 4 articles per row as soon as the screen resolution is bigger than 1400px as an example – that is much easier, you would do like this:

@media only screen and (min-width: 1400px) {
.post-list .post-row { width: 50%; border-bottom: 0; }
}

Yup, with:

.post-list .post, .post-list .page { width: 100%; }

I’m trying to edit that loop to make 3 posts available, but it’s not working somehow. Without sidebars two looks too big, 4 – too small.

content.php does not have that code that you mentioned.

Ok, i did it like this:

In index.php, archive.php and search.php:

<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
<?php get_template_part('content'); ?>
<?php if($i % 3 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>

In custom.css:

@media only screen and (min-width: 720px) {
.post-list .post-row {border-bottom: 0; }
.post-list .post,
.post-list .page { width: 33.3%; float: left; }
}

There should be a better way, but it worked 🙂
Thanks Alexander for tips!