Resizing Blog Width: Image Problem

So, you decided to enlarge or make your blog smaller. And then this happens:
The image's size overlaps to the blog(main-wrapper)  width, you can fix it by editing the post but what if your other posts have the same problem. Changing the image size will be tiring by doing it individually. So to solve this.We need a simple CSS code:

Here's the solution:


1. You should know the size of your blog, to be specific the main-wrapper where your posts are written. You can go to the blog dashboard >Template> Edit Html, Find "main-wrapper" or to Customize> Adjust widths.
You can get the size of your blog posts area by subtracting the entire size(960px) to the right sidebar(310px) which for this, 650px. But you should keep in mind also the padding and the margin. So, it is safe to use 600px as your base image size.

2. Then add this simple CSS code below before ]]></b:skin>
.post-body img{
   max-width: **px
  height:auto;
}
**size in px, the size of your blog posts area.


That's it! Any thoughts for this?

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables