Mysterious text wrap around floated image

[keithpurtell]

My client wants a minimal design with many modifications. The Atmosphere theme has three sections on the splash, ea with image and text. I was asked to replace ea image with a slider. The first test worked, and is "02 Detail Focused" on the staging link.

Copied that code over to "01 Big Picture Minded" and added new text and a new slider. Now the text is wrapping around the slider. I thought it was just too long, but removing all but one sentence from the text did not help. I know the text is there because I can see the stubby horizontal line, and the text itself is in the source. Chrome's cool web dev tools not helping so far.

I'm stumped, have a deadline coming up.

https://staging2.505architects.com/

[Victor Font]

There's no text showing under 01. Can't help if we can't see the problem.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[keithpurtell]

The reason I titled this "mysterious text wrap around floated image" is because the text is wrapping around the floated image. So much so, that it is out of sight. Presumably it is under the section below.

Also, the code for this section is the same as the one below it, which did *not* exhibit this behavior.

Here is the code inside the WordPress editor:

<figure class="splash_slider_left">
<div class="contain_slider">[smartslider3 slider="3"]</div>
<article class="slider_test_image_left"><h1 class="number_underlined">01</h1><h1>Big Picture Minded</h1><hr class="one-two-three"><p>The big picture is our clients’ overarching story or idea.&nbsp;&nbsp;<sup>1</sup></p></article>
</figure>
<!-- It’s the reason we work together. By making the big picture a consistent part of our message, it becomes an organically created piece of knowledge. When this occurs, remaining ideas become easier to understand. We’ll connect these big ideas while simultaneously securing the details in place. At 505 Architects we understand that great architecture must embrace our clients’ intended purpose for their project. Together we accomplish this, while ensuring the project is integrated into the environment it shares with those around it. -->

Most is commented out, because I suspected an overflow problem.

Here is a screen capture. At lower left you can see a small horizontal rule. That is part of the text being pushed down and away. It's normal for a float to "push" text, but why would the first two text objects (the number and title) be visible, whereas the remainder is being pushed far away?

[keithpurtell]

Victor,
As I look at this with fresh eyes this morning, I note that the CSS for the horizontal rule includes "clear: left" which I will revise. Hopefully that will help.

I'll report back if not.

[keithpurtell]

Just to confirm: The theme's default setting for the HR was clear:left.

Once set to clear:none the text displays normally.

[Author]

Posts