Awkward Text Wrap With Portrait Images

  • Resolved lisavollrath

    (@lisavollrath)


    11 years, 2 months 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:

    https://tentwostudios.com/images/carton.jpg

    You can also see it in action on the live site:
    https://https://links.lisavollrath.com/

    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?

Viewing 7 replies - 1 through 7 (of 7 total)

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

    Thread Starter lisavollrath

    (@lisavollrath)

    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.

    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.

    Thread Starter lisavollrath

    (@lisavollrath)

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

    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.

    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;
}
    Thread Starter lisavollrath

    (@lisavollrath)

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Awkward Text Wrap With Portrait Images’ is closed to new replies.