Resize Blogger Image: How To Automatically Resize Blogger Post Image To Adapt Template Width

Okechukwu Solomon August 03, 2018

Blogger seems to be a Great blogging platform after introducing a Free Comodo SSL Certificate to blogger custom domains. This is a great move by Google, they're always doing the best things to keep blogger platform growing.

So in this tutorial I will be discussing on how to automatically resize blogger post images and prevent them from overlapping or jumping over your blogger template width just like in the image below.


You can have your blogger post images automatically resized to adapt the width of your template without affecting the template logo the footer images width. All you have to do is add the below CSS code to your blogger template and save.

First Step is to Download and Backup your Blogger Template file

You can use the blogger online template editor or duplicate the downloaded backup and edit offline using any text or html editor.

Click Ctr+F and if you are using a mobile phone use the find or Search text option and find /head

When found, kindly paste the below CSS code above the </head> tag

<style>
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
background-color: transparent;
margin: auto;
}
</style>

Now Save your template.

You can now visit any of your website post or pages and see for yourself that the post images has been automatically resized making your website to be mobile friendly just like the image below.


Feel free to ask us any blogger related questions through our comment form and don't forget to appreciate us if this post was really helpful to you.

Is This Article Helpful?
Please Share this Article with your Friends on Facebook, Twitter, and Google+. Are you Finding it Difficult to Comment? See How to Comment on Wazobiawap.
DMCA NOTICE:The Posts and Images on this Website Must not be Copied or Re-posted on other Websites

RELATED POSTS