Wordpress Caption Formatting

I'm trying to create a custom wordpress theme. Everything has gone fine, except image formatting in post content. Image captions are not displaying properly in newly created theme. I have already added wordpress core css as given below.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

And I'm using following code to display my post content

?php get_header(); ?

div class="row"

    div class="col-md-8"
    ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?
        h2?php the_title(); ?/h2
        pem?php the_time('l, F jS, Y'); ?/em/p

        ?php $content = get_the_content(); ?
        div class="post-content img-responsive"
            ?php echo $content?
        /div

        hr
        ?php comments_template(); ?
    ?php endwhile; else: ?
        p?php _e('Sorry, this page does not exist'); ?/p
    ?php endif; ?
    /div


    div class="col-md-4"
        ?php get_sidebar(); ?
    /div
/div

?php get_footer(); ?

It makes some captions properly. Still some captions are not arranged properly, they are dumped into screen as in wordpress editor. Images with caption are shown as given.

What should I do to display all post contents properly?

Topic captions css Wordpress

Category Web


Don't know what was the actual problem. Using following syntax to display content solved problem.

<div>
    <h tag><?php the_title(); ?></h tag>
    .............other things like date and author
    <div>
         <?php the_content(); ?>
    </div>
</div>

Any way, thanks for everybody who tried to answer my question.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.