The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
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
pandy
post May 30 2020, 10:26 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.)
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 #4


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
pandy
post May 31 2020, 03:25 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 31 2020, 04:44 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 31 2020, 05:16 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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. 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;}
}





User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 31 2020, 06:02 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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 box block and floated left. The image already is floated left.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 31 2020, 06:26 PM
Post #9


.
********

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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:21 AM