Join our Telegram Channel to stay updated on Tech, SEO, and Online Money Making Join Now!
Home
Blogger
How to

How to Make Images Responsive in Blogger Blog

Today in this post I am going to tell you how to make image responsive in blogger. I am going to share css code to make image responsive in blogger.

How do I make my images responsive in the Blogger blog?

To make your images responsive in the blogger blog. Firstly copy this CSS code (.post-body img { width: 100%; height: auto }) and navigate to themes>Customize>Advance>Add CSS after that paste the CSS code and click on save. Now all your blog post images will become responsive. 

Today in this blog post I am going to tell you about How to make images responsive in a blogger blog.

If you have a blog on blogger.com then you have to face this problem once in your blogging career.

If you have a blog on blogger.com. So you will have to face this problem. When you upload images to your blogger blog, it will not be responsive.
 
make image responsive in blogger
add responsive images in the blogger

If you try to resize the image from the blogger image settings. You can only change its size but you are not able to make it responsive from blogger image settings.

If you want to add responsive images in Blogger. So you kept reading this post.

Before going further in this tutorial of making images responsive in the blog post. Let first understand what is a responsive image?


What is a Responsive Image?

A responsive image is an image that can change its size depending upon which device it is opened or getting seen.

If it got seen on a desktop it becomes the highest size and similarly, If it is seen on mobile the image got shrunk to fit in mobile without changing the aspect ratio of the image.

Steps to make images responsive in blogger

  • Open your blog in which you want to make responsive images.
  • After opening navigates to Theme which is just above the settings option.
blogger theme settings
Blogger theme customization settings

  • When you open themes settings then click on customize.
blogger theme advanced customization add css code
Blogger theme customization adds custom CSS

  • After that Click on Advance and choose the option to add CSS.
.post-body img { width: 100%; height: auto }
  • Copy the above CSS code for making images responsive in the blogger and paste it into the Add CSS section.
  • After that click on the saves button to save the CSS code of the responsive image.


Conclusion 

If you use a responsive image it can increase your viewer's retention on your blog. When you use a responsive image then your blog looks professional on multiple devices.

If your blog doesn't have responsive images check it as soon as possible. If your blog doesn't have responsive images then make them responsive by using the steps I told you above in the post.

I hope this tutorial on how to make images responsive in the blogger blog helped you. If it helps then please make sure to share this post with someone who really needs it.
My name is Md Shoyab. I am a YouTuber and Blogger for my passion. I love discussing Technology, Blogging and Video Editing. I want to solve problems in your life by sharing my knowledge with you.

5 comments

  1. I try to loccate add css button usig mobile phone but i can't find it after following all the steps you outline above
    1. It is difficult to follow the steps pls use laptop or desktop or you can use desktop version in chrome browser of your phone. Then follow the steps shown in blog post to make image responsive in blogger.
  2. yeah awesome bro.. !!
    Thanks alot..
    1. I am Glad Shubham That's this article on making images responsive on blogger helped you. If you want any other blog post let me know it in comment section of any post.
  3. it's cool
Thanks For comment and please don't spam the comment section.
© ‧ Tech Generator. All rights reserved.