One of my favorite sites I bookmark for code snippets was down today (insert curses here) and I was back to square one with finding out how to do something… that something was making all of the images in Blogger posts the same size… with the exception of the Pinterest pin it button – how awful is it when you resize your images and your pin it button is enormous?!?!
Very awful indeed.
So if you ever wondered how to make this happen, here is the code you need to slip in to your template to make all of your images the same width, sans the pin it button:
|
1 2 3 4 5 6 7 8 9 |
.post-body img { max-width: 640px !important; height: auto !important; } .pinit-wrapper img { max-width: 125px !important; height: auto !important; } |
If you’re not familiar with the template code the best place to add it would be in Template > Customize > Advanced > scroll down to Add CSS > paste code in the window > Apply to Blog.
Note: for my Blogger templates I use the pin it button code from bloggersentral.com, if your code is from somewhere else the image code may differ, let me know and I’ll slip that code in to the comments for everyone.
*Change the 640px to whatever the width of your blog post is.
*Change the 125px to whatever the width of your pin it button is.
And there you have it!
Enjoy.
lissa says
this is a good & pretty simple tutorial. how about other images that you want to remain small such as a small badge – I guess you would have to add some code to the image itself, right?
have a great day.
Marie says
Hi Carrie! I’d recommend using a “max-width”declaration instead of “width”. A large fixed width will stretch and distort smaller images. Max-width prevents images that are oversized from exceeding the post area while keeping smaller images at their original size.
Carrie Koehmstedt says
I’m updating the post code now, that’s brilliant!
Vineet says
Hey, thanks for the tutorial. This as well as all the others. I have one question though. I do not want to shrink the images, I am looking to do the exact opposite. When I upload images on Blogger, I choose ‘original size’. The issue I have is, the images only cross the post border on the right hand side, is there anyway the images in the post would cross over both the sides?
Felicia says
Hey there! Thanks so much for all of your tips. I’m currently creating a blog using blogger , I wanted to see if you can help as I am stuck and cannot figure this out for the life of me! Lol
I am trying to add different links to my site..similar to what you have on your home page. However I am confused on how to post under each tab, for example I was able to create an “about me” and “contact” Page but I cannot figure out how to post individual posts under the pages themselves without the post showing on the home page.
Any tips would be much appreciated! Thanks Carrie! 🙂
talitha Haynes says
OMG… Thanks for this post. I been looking all over the web for a post like this.
Michaela says
omg thank you so much for this! I stayed up all night trying to fix this!
Michaela
http://www.lifeofaladybear.com
Martin says
Hi, I have changed the code in my blog so now all of my pictures are the same size. This is great for pictures that have been taken horizontally, but any vertical pictures become stretched width wise (I’m still learning)
How can I find this? X
Carrie says
Hi Martin, send me a link to your blog and I’ll take a look at what’s going on.
Diana P says
I found this so helpful!
Thank you very much!!
X
Anita Diaz says
I was so excited to try this, but when I go to “Add CSS” I cannot “Apply to blog” so not sure what is wrong.
Anita says
Thank you so much for your help! I found I needed to just hit the space bar a couple times at the end of the code to get the ‘apply to blog’ button to highlight so I could click on it. I did have to play with the width size to get it to fit my template. So happy to finally find your tips. Now I need to fix the width of the text, and try some of your other blogger fixes. Thank you, thank you:-)
Britt says
What can you add to the css to center the picture? I changed it to your suggestion, but now its left justified.
Yiota says
I tried to do this many times but nothing happens, is there another way to make my pictures larger? Thanks!
Yiota
pinkdaisyloves.blogspot.com
Carrie says
Hi Yiota, I would contact the designer of your template, they may have some extra code in there that is overwriting what you are trying to do.
Yiota says
Thank you! I’ll see what I can do!
Jennifer Gallman says
The template I downloaded is stretching all of the photos on the main page. Once you go to the actual post, it’s fine. Any ideas?
Jennifer
http://www.reviewscomingatya.com