WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Text wrap around image

[Resolved] Text wrap around image

  • Im having some trouble getting the text to wrap around an image im putting into the page. One paragraph will wrap but if there is a heading or bullet point list then it will stop the wrap. Is this normal behaviour?

    Ive used the standard in my child theme to ensure the float options are as wordpress suggests.

    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    a img.alignright {float:right; margin:0 0 1em 1em}
    a img.alignleft {float:left; margin:0 1em 1em 0}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

    Link to where this occurs:
    http://geordieflydesigns.co.uk/Wordpress/training/health-safety/fire-safety

    Any ideas? Thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi

    @esmi

    Forum Moderator

    It’s the h2 styling that is causing the problem. specifically:

    h1, h2, h3, h4, h5, h6 {
        clear: both;
    }

    in style.css.

    I changed that to

    h1, h2, h3, h4, h5, h6 {
        clear: none;
    }

    Seems to have worked and not affected anything else on my site. Thanks esmi!

    esmi

    @esmi

    Forum Moderator

    No problem. You might want to have a good wander around your site though in case the change has upset the odd page here and there. If it has, you may need to make the CSS change a little more specific.

    Unfortunately im a bit confused now – I made the changes to my copy on my local server and everything worked perfectly, made the change to the website and it put the layout all over the place. I thought it was a bit of a stretch that the clear:none worked straight away, but not sure why it works on one but not the other!

    How did you mean more specific?

    Ok made the same change but only to the h2 tag, seems to have worked – must have been something with the h1 tag maybe?

    esmi

    @esmi

    Forum Moderator

    If it was my site, I’d re-insert:

    h1, h2, h3, h4, h5, h6 {
        clear: both;
    }

    and then add:

    .entry-content h2 {clear :none;}

    so you are only targeting h2 tags within the post entry area.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Text wrap around image’ is closed to new replies.
Skip to toolbar