Space around photos
I’m new to WordPress and am using the “Chunk” theme for my blog. I’m having an issue with spacing around photos I’ve inserted – the text is butting up right next to the photos in certain positions. I’ve tried tweaking the horizontal spacing in the Advanced Settings, no dice. I’ve searched and seen some old responses to this issue, but nothing that resulted in a resolution of the problem. Anyone have a fairly simple/quick fix? I’m no coding pro…
The blog I need help with is anunrefinedvegan.com.
I’m having an issue with spacing around photos I’ve inserted – the text is butting up right next to the photos in certain positions.
I don’t see that when viewing your blog using Firefox 7.0.1. Which browser and version of it are you using? Have your tried clearing your browser cache and cookies? http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=32050
Is your browser version up to date? You can upgrade any browser version here.
Why don’t my images align the way I want them to?
The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.
- Align-left means position left, with the rest of the content wrapping around the right side of the image.
- Align-right means position right, with the rest of the content wrapping around the left side of the image.
- Align-center means position center, with no wrap-around (= the rest of the content below the image).
So if you want your images to be side by side on the same line start by setting the alignment of all three images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
<br style="clear:both;" />
@anunrefinedvegan: The tools of the visual editor are rather limited: if the image was plain, not captioned, adding “horizontal space” would mean extra space both left and right, not left only. Even so, you cannot apply it to captioned images: captioned images are preconfigured formulas you cannot directly edit in any way – you’ll only mess them up. What you can do to create space to the left of your right-aligned image is enclose the image in a section that floats right and is somewhat wider than the caption frame. The frame in your latest post is 317px wide, so you can switch the editor to HTML and turn this:
[caption ETC ETC ETC />[/caption]
<div style="float:right;width:330px;"> [caption ETC ETC ETC />[/caption]</div>
You can change the number to adjust the amount of space.
Thank you both for the quick and helpful responses! Amazing. Until I have time to do some tweaking and try your suggestions, I removed the captions on my photos and voila – the words are no longer bunched up against the frames. Timethief: the problem is worse when the photo is to the left of the text so this is why the problem didn’t seem too bad when you looked at my site (the photo was then to the right of the text). And I use Firefox, btw. Panaghiotisadam: thanks for the code!
Again, thanks so much.
The topic ‘Space around photos’ is closed to new replies.