How to display WordPress blog posts with multiple equal columns under image?

Question

I am trying to display all blog posts like a magazine article. Please see link below for the exact format.

http://imgur.com/a/jKAlM

Single.php

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 main-blog">

            <?php 

        if(have_posts()):

            while(have_posts()): the_post(); ?> 

                <?php the_title('<h1 class="entry-title">', '</h1>'); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?


                <div class="article-single">

                <p><?php the_content(); ?></p>

                </article>

            <?php endwhile;

        endif;


        ?>

        </div>
    </div>
</div>

CSS

.article_single {

    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-gap: 30px;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    font-family: Garamond;
    column-count: 3;


}

Whatever I do to the content also resizes the image. How can I display the content without messing up the image?

Answer 1

Not sure exactly what your problem is since there's no call to show the featured image here, but it's worth pointing out that your:

<div class="article-single">

Has no closing </div> tag anywhere. That might be borking up your layout. Seems like it should come right before your </article>

Answer 2

I resolved it by adding the featured image call. Thanks!

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 main-blog">



            <?php 

        if(have_posts()):

            while(have_posts()): the_post(); ?> 

                <?php the_title('<h1 class="entry-title">', '</h1>'); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?   >>








                 <?php if(has_post_thumbnail()): ?>

                    <div class="text-center"><?php the_post_thumbnail('large'); ?></div>

                <?php endif; ?>

                <div class="article_single">

                <p><?php the_content(); ?></p>


                </article>





            <?php endwhile;

        endif;


        ?>

    </div>
</div>