Quick Tip - Fix Images Breaking Out Over The Sidebar On Blogger


Orange Square 3D Blogger LogoAn Email I received recently for a Blogger user complained photos they added to posts were overlapping onto the sidebar.I facet I have seen this on a few blogs and have helped people with the problem.Fixing it is easy and only takes a minute.All we do is add a snippet of Css that makes sure photos and images can only be at maximum 98% the width of posts.So even if you added a huge image this code will restrict it from breaking out of the post body, Lets do it !

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

.post img {max-width:98% !important}

That's it, said it was easy.What do you think and have you any other faults on your blog that annoy you ?

Drop Your Comments And Questions Below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Thank you so much for posting this. This is one problem that annoys me beyond belief. Love that it is an easy fix, too.

  2. I tried to paste that and then pressed the "apply to blog" button but when I went back into the blog to test it out, the pictures still spill over to the sidebar and when I go back into the template/customize/css the code I pasted is not there anymore. What step am I missing to get the code to apply to my blog template?

  3. I have tried this code before some week when I was tweaking my template.. But the strangest thing what happend was that the header image also being cropped by this process when using visiting the site with chrome or safari.. :p .. Can u fix it ??
    ------------ Rounak (www.HackingUniverse.org)

  4. Thanks you I am searching for this.

  5. You may use this CSS code for better result .post-body img{max-width:99%!important}

  6. Ahh, that's a very cunning approach: it means I can just choose x-large, and not worry if that would be larger than my post body. Thank you.

  7. This is always been my problem, thanks to you sir i know what to do now, so happy now :)

  8. For some reason, it made my extra large photos super skinny and unrecognizable. Weird. I do have customizations made to my blog template so perhaps that has something to do with it. When I tried the code from Abu Shaleh above, it did nothing.

  9. Worked for me, brilliant, the resolution of pictures set to "Original Size" and limited by your script is much greater than selecting "Extra Large" and having google compress the picture.

  10. And another issue solved for good. THANKS!

  11. I will check this out when I publish the post I'm preparing.I've copied the code, so we'll see.
    Meanwhile, I'm terriblly pissed off by my blog mobile view. It doesnt's show up as on the desktop, there is no picture in the header and blogger offers options of which none works for the picture to show up!
    What to do?

  12. works perfect - but only for centred pics!
    Thank you soo much!

    xoxo, Nina

  13. Thank you so much for posting this, it was really bugging me that the side bar was overlapping x-large photos, but its all good now, thanks!

  14. Thank you so much for this, what an easy fix.

  15. My photos are fine, but my posts are overlapping. What should I do? I tried adding this CSS code, found on a post in a different forum, but it's not working:

    #post-body-5217595715490299563 .shareaholic

  16. Thank you soooooo much, The first code didn't work for me but I tried the one listed in the comments, I tweaked it and put mine for 90%.

  17. Oh gosh, thank you SOOOOO much for this! Such an easy fix that I've been searching for... for years, almost! Thank you so much for sharing!

  18. Thank you so much for this easy solution. It was driving me mad!


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us