More and more people using mobile and pad to surfer the internet these days, for most of the websites, 60-80% visitors using mobile now, so make your site responsive is accessory.

For some of the “old” WordPress themes, they’re responsive, but the images you insert with captions don’t behave responsive, I have found some solutions, but most of them are not easy to use, here is a simple way to make your images with captions responsive.

WordPress responsive images with captions

What you do is just change some of the file style.css

Make the caption responsive:
#content .wp-caption {
background: 1px #F9F9F9;
border: 1px solid #DDD;
box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
line-height: 18px;
margin-bottom: 20px;
padding: 4px;
padding-top:22px;
text-align: center;
max-width:96%;
color: #333;
}

Make the images in the post responsive:

.entry-content img {max-width: 96%; height:auto;}

Done!