In previous post we created our demo template which had no CSS design defined. Also the images I used in the post were considerable big which I did on purpose. Now when the screen size is reduced the image size remains same. This way the image overflows the view area on device. Which is not acceptable when making responsive designs. So we are going to make the images in our blog fit the view area of visitors.
To do so we simply define the image size to be 100% by default.
That is add

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
}
   


to the CSS of out theme.