Homepage Loop Somehow Breaks Styling Of Post Grid

Question

I'm experiencing something really strange, that I just can't seem to figure out. I'm busy writing my own theme. It's nothing special or super advanced, just wanted a fun project and get a little custom.

On the homepage, I want the posts displayed in a masonry style, pinterest clone card UI. I've set up the HTML and the CSS using Foundation. Everything works 100% as it's supposed to before I use the WP loop to pull in posts.

Here is how it look when I hardcode the HTML:

Here is how it looks when I use the WP loop to pull in from content.php:

I've also moved the contents of content.php inside the loop on index.php, and I get the same issue. Can't really figure this out.

Home Page Code:

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
        <article>
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( 'content' );
                    endwhile;
                else :
                    echo wpautop( 'Sorry, no posts were found' );
                endif;
            ?>
        </article>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

Content Code:

<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo '<span class="category label">' . $tag->name . '</span> '; 
            }
        }
    ?>
</div>

CSS:

.bob article {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}

.bob section {
  position: relative;
  display: inline-block;
  margin: 0.25rem;
  padding: 1rem;
  width: 100%;
  background: #E5E5E5;
  border-radius: 5px;
}

Getting a little frustrated. Any help would be much appreciated.

Answer 1

I assumed that you have the static page works well before you sliced up and make it into wordpress theme development.

I had the same problem, But I managed to solve this by doing some hints:

• Check the slicing of the element you're about to loop. Only loop the element of the post. Perhaps you missed some div elements that included into the loop.

maybe try this :

<?php get_header(); ?>
<div class="row" id="content">
    <div class="medium-9 columns">
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                       get_template_part( 'content' );
                    endwhile;
                else :
                    echo wpautop( 'Sorry, no posts were found' );
                endif;
            ?>
    </div>
    <?php get_sidebar(); ?>
</div><!-- End row-->

Content Code :

<article>
<section class="animated fadeIn">
<div class="ribbon"><span>Eat This</span></div>
<img src="<?php echo the_post_thumbnail(); ?>" />
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<div class="cats-block">
    <?php
        $posttags = get_the_tags();
        if ($posttags) {
            foreach($posttags as $tag) {
                echo '<span class="category label">' . $tag->name . '</span> '; 
            }
        }
    ?>
</div>
</section>
</article>

Answer 2

The issue wasn't with WP, or Foundation, but rather with the amount of posts I was displaying. More than 3, actually build the masonry grid layout and forces the columns to line up alongside each other.