Now Most of the blogger blog owners busy with making their blog responsive, while making responsive template some of them are forget to make their blog post images responsive, this will cause stretched image in blog posts.
With the use of Media queries you can make post images responsive, Media queries are rules that are defines different styles for different devices. With the use of Media query you can customize your template for many devices like Smartphones, Tablets, and Desktop.
Also Read : Hide Blogger Widgets in Mobile Version
How To
1. Goto blogger Dashboard and open template designer and click Edit HTML
2. Add Media query tag (If you already added Media query then skip this step and goto Step 3).
Now search for </b:skin> in your template code and add the following code below </b:skin>
<style>
@media screen and (max-width: 880px) {
}
@media screen and (max-width: 700px) {
}
@media screen and (max-width: 420px) {
}
</style>
3. Now after you added the media queries tag, now let’s make our post images responsive
Add the following codes inside your media query
.post a img, .post img{max-width:99%; height:auto;}
the finale code look like this
<style>
@media screen and (max-width: 880px) {
.post a img, .post img{max-width:99%; height:auto;}
}
@media screen and (max-width: 700px) {
.post a img, .post img{max-width:99%; height:auto;}
}
@media screen and (max-width: 420px) {
.post a img, .post img{max-width:99%; height:auto;}
}
</style>
