Wrap text around photo

charles101 · 2019-01-14 11:17:08

I want to create an About page that has text which wraps around a photo which is positioned against the left or right margin. What is the best way to achieve this in Backlight 2 and maintain the responsive qualities of the interface? What if I wanted 2 photos, one against the left margin and the other lower against the right margin?

Thanks and sorry if this question has been asked before.

rod barbee · 2019-01-14 12:07:32

See this: http://community.theturninggate.net/vie … hp?id=9276

charles101 · 2019-01-16 07:59:59

As always much thanks Rod. I will give it a go shortly.

charles101 · 2019-01-16 10:17:35

Rod,

Works like a charm. Is there a way to have one portion of text wrap around the photo but a second section of text appear below the photo regardless of the width of the browser?

Thanks.

rod barbee · 2019-01-16 14:00:22

Use the “clear” property on the text that you want to always fall below the picture:

<p style="clear:left;">Your text......</p>

If you’ve floated the image to the left use clear:left;
Floated right, use clear: right;

charles101 · 2019-01-17 07:41:28

Rod,

Thanks but the "clear" property does not seem to be doing it's magic. Here is a link to the site if you have enough patience and would like to take a look. My goal is to have the contact form on the "about" page fall underneath the picture regardless of the browser width.

www.blackeyeimages.com

rod barbee · 2019-01-17 08:08:11

The problem looks to be in the quote marks in the inline styling. They're slanted, they should be straight. Did you happen to write the code in a word processor and then copy/paste into the copy area in Backlight?
Write your text either in a plain text editor or in the Backlight copy box.

I've edited my example above and put it in a code box.

I've also updated the post linked to above to include clearing.

rod barbee · 2019-01-17 08:52:18

BTW, I really like your site design

Daniel Leu · 2019-01-17 09:22:53

charles101 wrote:

Rod,
Thanks but the "clear" property does not seem to be doing it's magic. Here is a link to the site if you have enough patience and would like to take a look. My goal is to have the contact form on the "about" page fall underneath the picture regardless of the browser width.
www.blackeyeimages.com

It looks like your texteditor did beautify your double quotes... You need to use regular double quotes.

“clear:left;”

vs

"clear:left;" /* correct version*/

charles101 · 2019-01-18 08:00:44

Thank you so much for the help and great eyes. I had to get out the reading spectacles just to see where I goofed.

rod barbee · 2019-01-18 08:08:58

It's a really easy one to miss.

Community @ The Turning Gate

#1 2019-01-14 11:17:08

Wrap text around photo

#2 2019-01-14 12:07:32

Re: Wrap text around photo

#3 2019-01-16 07:59:59

Re: Wrap text around photo

#4 2019-01-16 10:17:35

Re: Wrap text around photo

#5 2019-01-16 14:00:22

Re: Wrap text around photo

#6 2019-01-17 07:41:28

Re: Wrap text around photo

#7 2019-01-17 08:08:11

Re: Wrap text around photo

#8 2019-01-17 08:52:18

Re: Wrap text around photo

#9 2019-01-17 09:22:53

Re: Wrap text around photo

#10 2019-01-18 08:00:44

Re: Wrap text around photo

#11 2019-01-18 08:08:58

Re: Wrap text around photo

Board footer