[resolved] Awkward Text Wrap With Portrait Images (8 posts)

  1. lisavollrath
    Posted 2 years ago #

    I am having a text wrap problem with this theme. If I use portrait-oriented images that are narrow, and if the text begins with words that are short, I get a few words to the right of the image, and then an ugly break. I took a screenshot:


    You can also see it in action on the live site:

    I'm using a child theme to make minor tweaks to the CSS, so I've played with some fixes. First I tried a break clear=all tag after the image---but that makes the first child box on each page ugly.

    I tried centering the images in the box, but again, an ugly first child, and also, if the first word happens to be I, it doesn't fix the problem.

    Thoughts on how I might correct this, and not create an even uglier problem?

  2. Josiah
    Posted 2 years ago #

    altering this css will fix it but a warning it will adjust the margins on the home page everywhere.

    a img.alignleft {
    float: left;
    margin: 5px 27px 20px 0;

  3. lisavollrath
    Posted 2 years ago #

    Thanks, but that doesn't really resolve all the instances of this problem. Even taking that right margin up to 30px still left text wrapping awkwardness on quite a few posts.

  4. Josiah
    Posted 2 years ago #

    Have you tried to adjust the image thumbnail size in the media settings? It appears that the vertical images are having all of the trouble.

    I wish I could be more specific on these.

  5. lisavollrath
    Posted 2 years ago #

    Thanks, Josiah. I have tried that. No matter how I adjust the size of the thumbnails, there are problems with one post or another.

  6. Josiah
    Posted 2 years ago #

    hmmm... That may be a theme issue then at that point in how it arranges the content. I'm sure there is a way to fix, but I'm not sure how just looking at it. Sorry I couldn't be more helpful.

  7. c.bavota
    Theme Author

    Posted 2 years ago #

    If you increase the size of your thumbnails this will not be an issue.

    Or you can use this CSS to make your images not float to left:

    .masonry img.alignleft {
       float: none;
       display: block;
       margin-left: auto;
       margin-right: auto;
  8. lisavollrath
    Posted 2 years ago #

    Tried changing thumbnail sizes, but because I have both portrait and landscape images, there are always some that end up with the weird text wrap.

    Tried the CSS fix. Unfortunately, it makes the first block (the large one) on each page look really ugly---small image, with text below, rather than to the left.

    Thanks for the help, but I think my solution is to move to a different theme.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic