How to Override an Automatic Photo Resize: Css Code

I was trying to put in an archive page for my travel page, but when I uploaded it the pictures that were supposed to be 145 pixels were 600, because the auto resize code I put in for my posts.

If you need the auto resize code, here it is:

.post-body img {
width: 600px;
height: auto;
float: left;
border-style: none;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
}

Put this code in the css section of your template. This code is good for uploading pictures of different sizes and have them all look the same and fill out your blog posts section. I added other elements, but for photo size you just need the width with a set size and height with auto (if you don't have auto, your photos will look weird).

Now, what if you want to upload a photo of a different size? This took me forever to fix and I couldn't have done it without Elise Cripe. I took her blog design love e-course from ABM. If you're wanting to learn more about designing your blog, I highly recommend this e-course. Anyway, here is what you need to add to your photo code:

style="width:145px !important; height:145px !important;"

You need to put this with each image. I put it at the end, after the image source section of the code. Be sure to change the pixels to the size you need. I had a hard time finding this on the internet, so I hope this helps someone else.

I'm still learning about blog design and html, but let me know if you have any questions!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s