Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to reposition text adjacent to a responsive image below the image

Posted by: chris montez May 30 2020, 01:50 PM

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.

Posted by: Christian J May 30 2020, 03:39 PM

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.

Posted by: pandy May 30 2020, 10:26 PM

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.)

Posted by: chris montez May 31 2020, 01:17 PM

QUOTE(Christian J @ May 30 2020, 03:39 PM) *

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.


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.

Posted by: pandy May 31 2020, 03:25 PM

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.

Posted by: Christian J May 31 2020, 04:44 PM

QUOTE(chris montez @ May 31 2020, 08:17 PM) *

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

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.

QUOTE
font-style: bold:

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


QUOTE
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.

That incorrect syntax, it should be:

CODE
<strong style="display: inline-block">

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


Posted by: Christian J May 31 2020, 05:16 PM

QUOTE(pandy @ May 31 2020, 10:25 PM) *

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.

Not STRONG either, now that I think of it. https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#images-of-pictures nowadays, so here's another idea using that:

CODE
<figure>
<img src="dog.jpg" alt="Trish Cox with musher Kert Perano">
<figcaption>Five Time 21 Day Tour returning client Trish Cox with musher Curt Perano</figcaption>
</figure>

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:

CODE
figure {display: table;}

figure img, figure figcaption {
display: table-cell;
vertical-align: top;
}

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:

CODE
@media (max-width: 700px)
{
    figure, figure img, figure figcaption {display: block;}
}






Posted by: pandy May 31 2020, 06:02 PM

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.

Posted by: Christian J May 31 2020, 06:26 PM

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.

Posted by: pandy May 31 2020, 06:47 PM

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

QUOTE
(you need to clear the float as well, though).


Yes, if there's more to come.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)