How can I give these Wordpress images room to breathe?

June 1, 2008 9:05 PM

The images on the front page of my Wordpress blog are all squashed up against the text, while the single-post images are not. Why is this?

Front page.

Single post view of same post.

I've searched through the CSS and templates, but my tiny bit of CSS cut-and-paste knowledge isn't helping. Last time I posted to wordpress.org, I didn't get an answer. Any ideas? Thanks!

posted by miniminimarket to computers & internet (5 comments total)

I think if you look for the CSS selector called "#feature p img" in the file at:
http://www.jessicasuarez.com/wp-content/themes/monochrome_lite/style.css

The CSS looks like this:
#feature p img {
margin: 7px 0 2em 0;
}

That first zero is what's making it not have any whitespace on the right side of the image. Change it to something like the following and you should be all set.

#feature p img {
margin: 7px 1em 2em 0;
}
posted by ssmith at 9:41 PM on June 1, 2008

the comment count on the left is taking up a lot of real-estate on the front page. If you could move that up to the top, as in the single-post, I think you would see a lot of the problem resolved. Look for a div classed as "comments" or along those lines, and replace the php on the front page with the script from the single post.
posted by self at 9:42 PM on June 1, 2008

The front page image's margin is from #feature p img { margin: 7px 0 2em 0; } from style.css, line 276. The single page image's margin is from p img { margin: 1em 1em 1em 0; } from typography.css, line 57.

For nagging little problems like this, I like using Firebug. You can pick an element and it'll show you what CSS is being applied.
posted by theiconoclast31 at 9:46 PM on June 1, 2008

Aside: There is also an odd img tag which isn't causing your problems, I don't think, but it has no src attribute, it's empty, which I've never seen. Is this a hack I've not heard of?
posted by maxwelton at 11:03 PM on June 1, 2008

Thanks guys. I had to wait until this weekend to fiddle around, and I actually used all three suggestions: fixed the feature css to give the images room, moved the comment count and made the column bigger, and installed firebug to find the right elements. I don't know about the image tag not having an src attribute though.
posted by miniminimarket at 8:51 PM on June 8, 2008