Need help? Check out our Support site, then

Photos overlapping, text out of place

  1. I wrote here before looking for an answer and there was no response so I'll try again.

    I am writing a photo journal of our trip. I take a lot of photos so the family can see where we are and what we are doing. The post takes only 30-60 minutes to write but to place the photos is ridiculous. They overlap, I shrink them and then the text moves in between the photos. I am trying to be creative but this is taking entirely too long! I delete photos and try again in adding them to the the post. I can not figure out the trick! What am I doing wrong?

    On the most recent post I ended up just centering the majority of photos. And when you read the paragraph that starts, "Then I went upstairs. . ", that was supposed to be a paragraph in itself but it moves up between the photos.

    I googled this problem but the responders suggested a code before and after the photo which I don't understand. Can any one please help me. This is taking the fun out of photo journaling.

    I am using AutoFocus theme.

    A HUGE thanks to anyone who can help me!!!!

    The blog I need help with is

  2. Have you thought about using galleries?

  3. When you set the alignment of an image to left or right, the rest of the content is supposed to wrap around (= start next to instead of below the image). So the results depend on the size of the images and the text blocks, in relation to the available space.
    For instance, suppose you insert a small left aligned image A at the start of a post, then enter text block T next to it, then you want to insert a small image B below image A. If text T is shorter than image A, image B will show to the right of image A (below text T), because of the wrap-around effect of image A.
    Or suppose you insert left aligned image A then right aligned image B (so that they show side-by-side), and then you want text block T below these two images. If the two images are too small, they leave a gap between them, so T will start inside that gap (as in your latest post).
    To prevent these side effects, yes, you need to add some coding in the so-called Text editor. The solutions can vary, depending on the situation. The easiest one, when you aren't experienced in coding, is to add a div that says "stop the wrap-around effect here":
    <div style="clear: both;"></div>

  4. Before you attempt this for your latest post, you need to correct something else: you have set the text alignment of all the paragraphs to left. This is superfluous, because that's the default, so it only makes the coding in the Text editor look more complicated. Select all in the Visual editor, click the Align Left tool, click Update.

Topic Closed

This topic has been closed to new replies.

About this Topic