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>
<p><em><?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?