Posted : Thursday, August 23, 2012 | Post Author : Paul Crowe | 20 comments
An 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.
Author – 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.
20 comments:
Thank you so much for posting this. This is one problem that annoys me beyond belief. Love that it is an easy fix, too.
ReplyDelete
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?
ReplyDelete
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)
ReplyDelete
Thanks you I am searching for this.
ReplyDelete
You may use this CSS code for better result .post-body img{max-width:99%!important}
ReplyDelete
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.
ReplyDelete
This is always been my problem, thanks to you sir i know what to do now, so happy now 🙂
ReplyDelete
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.
ReplyDelete
Works like charm, thanks a lot
ReplyDelete
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.
ReplyDelete
And another issue solved for good. THANKS!
ReplyDelete
Thank you. 🙂
ReplyDelete
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?
Thanks!
ReplyDelete
works perfect – but only for centred pics!
Thank you soo much!
xoxo, Nina
ReplyDelete
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!
ReplyDelete
Thank you so much for this, what an easy fix.
ReplyDelete
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
{
display:none;
}
ReplyDelete
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%.
ReplyDelete
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!
ReplyDelete
Thank you so much for this easy solution. It was driving me mad!
ReplyDelete