The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post May 30 2020, 03:39 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chris montez
post May 31 2020, 01:17 PM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 26-April 20
Member No.: 27,299



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:02 PM