How to make images responsive in blogspot

After Google Launches its mobile first indexing it becomes necessary to shift the focus of your website or blog from desktop to mobile.

There are lots of factor to concern when it comes to mobile. but one of the most important one is responsiveness.

When you add a custom theme to your blog It will be responsive always. But sometimes Images not come responsive and If images are not responsive then it will look like the below image.


You can clearly see that nothing is showing clear and the aspect ration of images has been changed.

Solution:-

To tackle this problem in blogspot You should add an external css in theme. So how do you add an external css in blogspot. For that sake you should first go to the theme menu and after that click on the saffron button "Customize". Where you will see an option named "Advanced". After clicking Advanced Click on "Add Css"

In this section you can add the custom css for your theme. This section will look like below. 



In the white area which says "Add css here to override existing styles". Add the below code.

.post-body img { width: 100%; height: auto }

Now click on "Apply to Blog".

Then check your blog in mobile it will now have responsive images like  my blog has now.


Now you can see the difference between the appearance and UI. 





2 comments:

  1. All of the suggestions so far are fantastic. I'd also like to add our tool (julbul.com) to the list as we're offering 5 player skins with unlimited color options for a one-time fee

    ReplyDelete
  2. Much appreciated such a great amount for this data. I need to tell you I agree on a few of the focuses you make here and others may require some further audit, yet I can see your perspective. blog comments

    ReplyDelete

Powered by Blogger.