[Resolved] Text wraps only half of my image

Home Forums Support Text wraps only half of my image

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #114801
    Ben

    I have a tall, narrow image that I want inserted in the body of a page; the full height of sevaral paragraphs of text….next to the text on the right.

    I align it to the right and only the first two paragraphs of text ‘wrap’ next to the image. The rest of the text remains below. ANy suggestions? I have attempted to float the image to the right using custom CSS with this but it doesn’t work.

    .photo {
    margin: 10px;
    padding: 5px;
    background: #FFF;
    float: right;
    border: 1px solid #E0E0E0;
    }

    Thanks.

    #114802
    Tom
    Lead Developer
    Lead Developer

    Try giving the image a class of “alignright”, so it would look like: <img src=".." class="alignright" />

    If you want the text to stop wrapping a certain point, add this HTML in the “Text” tab where you want it to stop:

    <div class="clear"><!-- clear float --></div>

    #114809
    Ben

    Thanks for the reply Tom, still not working and driving me nuts! i cannot see anything in the html that is causing the wrapping to stop. I have tried using the visual editor ‘alignright’ and that is what shows in the html.

    The first two paragraphs wrap, then it stops.Surely it shouldnt be so hard to get all the text text to the image?

    I did add CSS to make the h1, h2, h3 header text wrap for an image on another page;

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

    Is this messing things up?

    #114819
    Tom
    Lead Developer
    Lead Developer

    Do you have a link to the page you’re working on? Wouldn’t mind seeing what’s going on 🙂

    #114879
    Ben

    So this is the page at the moment;
    http://wisemindshypnotherapy.co.uk/reducing-stress/

    What I need is for the picture to be the exact height of the text in the body, and remain in scale as the page is re-sized. So, I attempted to move the image from the widget container into the main body and just float it to the right. I will make it a bit prettier with a border or whatever if I can get the layout working.

    This is what I get;
    http://wisemindshypnotherapy.co.uk/sessions/

    As you can see, text wrapping stops after a couple of paragraphs.

    Thanks for your help!

    #114880
    Ben

    This page I needed the header text to wrap the image;
    http://wisemindshypnotherapy.co.uk/about-me-2/

    Here is all of the custom CSS I currently have applied;

    #content .entry-content h3 { margin-bottom: 0; }
    a,
    a:visited {
    text-decoration: underline;
    }
    .footer-widget-1 {
    text-align: center;
    }
    h1, h2, h3, h4, h5, h6 {
    clear: none;
    }
    .photo {
    margin: 10px;
    padding: 5px;
    background: #FFF;
    float: right;
    border: 1px solid #E0E0E0;
    }

    #114934
    Tom
    Lead Developer
    Lead Developer

    Interesting, where you have the class “website-links”, try replacing this with something different.

    GP looks for classes with “site” in them and clears them as main level components (site-header, site-footer etc..).

    If you change those class names, it should fix it 🙂

    #114945
    Ben

    What a legend you are! I just removed the class altogether; now works fine. Many thanks!

    http://wisemindshypnotherapy.co.uk/reducing-stress/

    #114949
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.