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,665 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. |
chris montez |
May 31 2020, 01:17 PM
Post
#3
|
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
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 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. |
Lo-Fi Version | Time is now: 12th May 2024 - 06:49 PM |