Closed phillipadsmith closed 2 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.
Any thoughts / updates, @alexgreen
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.
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.
http://thetyee.ca/News/2016/08/10/Faulty-Towers-Commercial-Drive/
Didn't seem 100% like an existing issue.
Over to @alexgreen first.