Homepage Loop Somehow Breaks Styling Of Post Grid

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="https://wordpress.stackexchange.com/questions/251130/<?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>

Related Posts: