Hello

Images on my website that are coded like this one: <img src="../images/trish.jpg" width="150" height="150" align="left" alt="Trish Cox with musher Kert Perano" hspace="8"> <strong>Five Time 21 Day Tour returning client Trish Cox with musher Curt Perano</strong>

appear as I want them to with the text beside the image on most devices. However, on my Ipad mini viewed vertically , this part: "Five Time 21 Day Tour" stays next to the image and this part: "returning client Trish Cox with musher Curt Perano" goes below the image . I would like all of the text to reposition below the image when resizing for the mini or cell phones. I understand the same problem is happening on cell phones although they look correct when I use the Chrome resizer to check them.

If you make the STRONG element "display: inline-block", the text will jump down below the image before line-breaking.

It becomes more tricky if you want the text to begin line-breaking already before jumping down below (and then jump down all at once). Possibly you can do something with media queries, such as only applying the inline-block in very narrow windows.

Make STRONG display: block and float: left.

(You should use CSS float: left instead of align="left" for the image and you shouldn't use hspace at all. You should use CSS margin.)

I thought this would give me the same result if I took out the <strong> and put in this <h6> with this CSS, but it wraps the text around the image instead

h6 {
font-size: 16px;
font-style: bold:
display: inline-block;

}

So I put this in : <strong "display: inline-block"> and the text still wraps around the image. This acceptable, though not what I was looking for.

Remove inline-block. H6 is block in itself and a block level element will behave as you want as long as you also float it left, as if you had made STRONG block and floated it as I said above.

I don't think H6 is a good choice though. These text aren't heading. If you are going to use a block level element, use a P or a DIV.

That didn't happen in my browsers; the whole text line stayed to the right of the image, or jumped down below the image as a whole.


Side note: that should be "font-weight: bold".



That incorrect syntax, it should be:


(though it's more practical to avoid inline styling like that).

Not STRONG either, now that I think of it. W3C uses FIGCAPTION for image captions nowadays, so here's another idea using that:


Along with this I use a CSS media query for applying different styling in narrow windows. The first style rule should make the image and its caption behave as two table cells side by side:


However in viewports narrower than 700px the media query style rule switches to two ordinare block level elements, that should each appear on its own line:

Why so complicated? The OP wants the text to the right of the image if there's room enough for it and all of it under the image if there isn't, no wrapping. That's exactly what happens if the text is box block and floated left. The image already is floated left.

You're right pandy, that is indeed simpler (you need to clear the float as well, though).

There's a slight difference in behavior, don't know if it's important to the OP:

- with the floated text box, the text will jump down below the image before any text wrapping takes place;

- with the media query, the text may start to wrap next to the image before jumping below.

I meant block, not box. So did you, I believe.
(Corrected mine.)



Yes, if there's more to come.