search

TheTyee / design-article.thetyee.ca

Working in the open on The Tyee's new article page design
http://thetyee.github.io/design-article.thetyee.ca/
Creative Commons Zero v1.0 Universal
3 stars 0 forks source link

Image float is breaking a paragraph #333

Closed phillipadsmith closed 2 years ago

phillipadsmith commented 8 years ago

http://thetyee.ca/News/2016/08/10/Faulty-Towers-Commercial-Drive/

Didn't seem 100% like an existing issue.

Over to @alexgreen first.

alexgreen commented 8 years ago

This appears to be caused by

.figure--xl, .figure--xl {
    clear: right;
    float: left;
    padding-top: 0;
}

(hmm I see an unrelated typo in the selector)

It's entirely possible that we may have to let a figure--xl break paragraphs occasionally when it's in proximity with an aside.

The figure--xl needs to float left to prevent collisions with asides. Omitting the the clear right does seem to solve the problem in this case, but I'd have to do some more comprehensive testing to ensure that it doesn't cause other problems elsewhere.

alexgreen commented 8 years ago

see also https://basecamp.com/1929296/projects/9481270/messages/60476230#comment_446108155

phillipadsmith commented 8 years ago

Any thoughts / updates, @alexgreen

alexgreen commented 7 years ago

Seems like we only have 2 examples of this issue: http://thetyee.ca/Culture/2016/07/15/New-Glimpses-of-Fighting-Fascists/ (but the issue only shows up in medium viewports) http://thetyee.ca/News/2016/08/10/Faulty-Towers-Commercial-Drive/

I have a solution that will fix one of them, but without further test cases it's hard to evaluate.

alexgreen commented 7 years ago

I just pushed a fix for this. afdbf4140a072ec877d271f8411697784182c2f8 It seems to correct every example I've been given at almost every viewport width. (On osx Chrome anyway -- once it's previewed we can test on other browsers.) However all but 2 of the examples were ads, not editorial photos, so I don't know if it will have the same success rate for fixing the problem in photo cases.