Wednesday, April 3, 2013

How to Make Blog Photos Respond to Column Width

It's always been a pet peeve of mine when my blog photos spill over into my sidebars.

You know when you size a photo perfectly to fit the width of your blog space, but later you do some redesigning and suddenly your beautifully large photos are sticking way out to one side and covering the info in your sidebar? Make. It. Stop.

Luckily, I happen to work with a bunch of coders.

So when I recently expressed my angst about this issue, it wasn't a big surprise when one of them emailed me a simple code later that solved all my problems. (Thanks, Kyle!)

Here it is broken down into a few (seriously) simple steps. Now you can redesign your blog and adjust column widths as you please with no consequences! Plus, it takes less than a minute total to make this happen. Score.

Note: Don't worry about it resizing smaller photos to be larger or anything crazy. The only thing it does is make photos that are too big just small enough to fit inside the column :)

1. Click on Template in the back end of your blog.

2. Click on Customize.

3.  Click on Advanced.

4. Scroll down and click on Add CSS.

5.  Copy the code below and paste it into the box.

Here's the code: .post.hentry img {width: auto;height: auto;max-width: 100%;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}

6. Click Apply to Blog. Then post a ridiculously large photo of Chuck Norris and don't worry about it spilling over into the sidebars because that's how this magic works.


Let me know if you have any questions! Happy blogging!
And feel free to repin this blog using my original pin so you can share this knowledge with your people!


chrissyblake said...

This is AMAZING!!!!!!!!! I have been struggling with this since I started blogging! Bless you and your work peeps. I owe ya'll doughnuts for this

katilda said...

SERIOUSLY. This small piece of info has made me so happy, haha. I put that Chuck Norris in "original size" (you know how it looks all super huge when you're writing the post) and it came out just perfect. Love it.

LaurenHoya said...

How did you know I always wanted to know how to fix that?! Code applied. Gracias!

katilda said...

So glad to be of help! It has seriously made my week. haha

Unknown said...

Thank you sooo much! I've been trying to figure out what to do to fix that problem on my blog for weeks now!


katilda said...

Oh you are very welcome! It's been bothering me for foreverrrr and the answer was so simple all along. haha

Unknown said...

Hi Katilda!

Thank you soooo much!! I had another CSS code to try to align all my pics but I was still having problems! But after using your code I think my photos are all working waaaay better now!

Now I just need to work out why the photos are all warped in Internet Explorer 8 and why when I look at my blog on my Ipad, the blog width is aligned more to the left!

Very tricky for a non coder like me! Please check out my blog and let me know what you think!


Lauren C. said...

This is even better than Nutella! (That means I highly approve.)

Thanks so much for this post! I always got my photos to be almost the right width... but never could get it perfect.


Emma said...

Why didn't this work for me??

Sowmia said...

Thanks so much for posting this. I hated the way my pictures were looking in Blogger and am so much happier now!! <3

McKell said...

This post just helped me so much!!
Thank you!!

The Vintage Twins

nora @ lovemotivated blog said...

so i have been using this code for a couple of weeks. i noticed it doesn't work with internet explorer. i noticed when i looked at my blog from work. the photos were spilling over. do you know why that is?

E. said...

oh you beautiful human THANK YOU.

Bambang S. said...

nice Boss..

Bambang S. said...
This comment has been removed by the author.
MarĂ­a said...

Thank you so much!!!

Roza said...

I desperately want this to work, but it just won't. I've tried so many alternative codes but nothing seems to happen. If anyone knows as to why this could be, please let me know! At the moment I'm just changing all the picture sizes manually but this is obviously very time consuming.

Unknown said...

You have no idea how hard I've been looking for this! I've tried many other codes that wouldn't work and yours did!! You are amazing! Thank you!

Unknown said...

Thank you Katilda! This is super helpful! So lucky that I found your post, cause the other sites' tips were way over-complicating things, esp for a blog newbie like myself.

Unknown said...
This comment has been removed by the author.
Unknown said...

Thank you veery much! I've been looking for this for ages and I've tried so many different codes, which didn't work and your did! Your post is super-helpful!

Callikrati Vuyuk said...

you are a saviour!!!!

Sally Fazeli said...

Thanks so much for sharing this info! I was just wondering as I love the fact that all my pictures are now perfectly aligned but do you know a code for just creating a little space in-between them? As if I do it myself by pressing the return button the gap is too big for my liking.

Thanks very much!

Sally x

Henar said...

Thanks so much for the help, had been struggling with this for a while and everything I tried seemed to just g down the drain...:)

Keep it up girl! ^^


Unknown said...

Stumbling across this has made my life a whole lot easier! Thank you for sharing!xx

Ashield said...

This wasn't even what I needed help with but I went ahead and installed the code. great post THANK YOU