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.