Comments on: How can I give these Wordpress images room to breathe?

Question: How can I give these Wordpress images room to breathe?

miniminimarket — Sun, 01 Jun 2008 21:05:59 -0800

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!

By: ssmith

ssmith — Sun, 01 Jun 2008 21:41:02 -0800

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;
}

By: self

self — Sun, 01 Jun 2008 21:42:05 -0800

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.

By: theiconoclast31

theiconoclast31 — Sun, 01 Jun 2008 21:46:37 -0800

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.

By: maxwelton

maxwelton — Sun, 01 Jun 2008 23:03:22 -0800

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?

By: miniminimarket

miniminimarket — Sun, 08 Jun 2008 20:51:11 -0800

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.