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?