How to reposition text adjacent to a responsive image below the image, When my website is viewed on a vertical Ipad mini or some phones, the |
How to reposition text adjacent to a responsive image below the image, When my website is viewed on a vertical Ipad mini or some phones, the |
chris montez |
May 30 2020, 01:50 PM
Post
#1
|
Newbie Group: Members Posts: 19 Joined: 26-April 20 Member No.: 27,299 |
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. |
Christian J |
May 30 2020, 03:39 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. |
pandy |
May 30 2020, 10:26 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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.) |
chris montez |
May 31 2020, 01:17 PM
Post
#4
|
Newbie Group: Members Posts: 19 Joined: 26-April 20 Member No.: 27,299 |
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. |
pandy |
May 31 2020, 03:25 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. |
Christian J |
May 31 2020, 04:44 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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). |
Christian J |
May 31 2020, 05:16 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. W3C uses FIGCAPTION for image captions 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;} } |
pandy |
May 31 2020, 06:02 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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
|
Christian J |
May 31 2020, 06:26 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. |
pandy |
May 31 2020, 06:47 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
I meant block, not box. So did you, I believe.
(Corrected mine.) QUOTE (you need to clear the float as well, though). Yes, if there's more to come. |
Lo-Fi Version | Time is now: 26th April 2024 - 09:20 AM |