Right now I have 3 posts in a row, 3 posts in the next row, and 1 post in the next row, and so on. I am trying to add space in-between the posts that have 3 in a row. Every time I add css margin-right:25px; to .col-mod-4 { it adds the space but 1 post gets knocked off the row, and instead I have 3 rows of 2 posts. Does anyone have any solutions? (I have attached a dropbox link with screenshots of the problem)
https://www.dropbox.com/sh/fbi17l2ortzpqkk/AACDm2XIcvJDjouAb0zPilfVa?dl=0
Here is my index.php
<?php
/*
* Template Name: learningwordpress
*/
get_header();
$i = 0;
$args = array(
'posts_per_page' => 14,
'paged' => 1
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
if( $i %2 == 1 ) {
$the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php
}
else {
$the_query->the_post(); ?>
<article class="post col-md-12">
<?php the_post_thumbnail('large-thumbnail'); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php echo get_the_excerpt(); ?>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</p>
</article>
<?php
}
?>
<?php
$i++;
}
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();</div>
