We have a plugin called Yet Another Social that places social-media (SM) icons below each article title.

In Responsive version 2.2.3, the plugin caused space to appear below SM icons and article image--which we alleviated with this custom CSS:

.yetanothersocial-container { float: left; }
.yetanothersocial-container +.clear { clear: left !important; }
@media only screen and (max-width: 640px) {
.yetanothersocial-container > div {
float: none !important;}
}

In Responsive2, we have the same problem. I've tried variations on the above CSS but to no avail. See, e.g.,
test.chigov.com/chicago/the-mayor/575-can-anyone-defeat-mayor-emanuel-2015.html

Can you help?

Jim

Hi Jim,

Just to confirm without that module the image is wrapped with the text?

Cheers
Paul

Sort of, Paul. With the plugin turned off, the text wraps around the image. I now have it turned off, so you can see this at
test.chigov.com/chicago/the-mayor/575-can-anyone-defeat-mayor-emanuel-2015.html

FYI: When turned on, the plugin evidently inserts this CSS before the article text:
<div class="clear"> </div>

Jim

Hi Jim,

Yeah I think that could be the problem - does the extension provider offer advice about implementing the plugin?

Cheers
Paul

Paul,

Unfortunately, the provider is no longer in business.

We did successfully resolve the space issue in Responsive version 2.2.3 using the CSS code shown above in this thread. But that code, and variations of it that I've tried, have no effect in Responsive2.

Can you suggest a modification to the code that might work?

Jim

The problem is the floated elements - it does need a clear for the icons

.yetanothersocial-container + .clear { display: none}
.yetanothersocial-container:after {clear: both}

I don't think the after will work but worth a punt to try

Check also if adding the Adjacent sibling selector doesn't mess up something else - I don't think it will

Cheers
Paul

Your CSS works, Paul.

However, now the article text starts on the same line as the SM icons. Do you know how I get the text to start below the icons?

Jim

Yeah I thought that might happen the elements are floated so it needs the clear

I thought the after might clear it but it hasn't

So in essence its not worked

I'll have a think about this

Cheers
Paul

Paul, is there a way to say in CSS "insert a new line"?

Also is the CSS we used with Responsive v.2.2.3 (below) at all instructive? (We got it from the plugin provider while they were still in business--so I actually don't understand what all of it does.)

.yetanothersocial-container { float: left; }
.yetanothersocial-container +.clear { clear: left !important; }
@media only screen and (max-width: 640px) {
.yetanothersocial-container > div {
float: none !important;}
}


Jim

Hi Jim,

We are on the edge of my css skills with this so I'm not sure how browser compatible this will be

.yetanothersocial-container { display: flex;}
.yetanothersocial-container +.clear { clear: none !important; display: flex;}

I'm ignoring what I suggested previously and what was suggested by the developer - so it may not work

Cheers
Paul

That code works, Paul. Thanks for the additional cogitation.

Unfortunately, it works in Firefox but not Safari (see attached). I've tested it with Safari 5.1.10 and Safari 6.1.6, so I don't believe it's a browser version issue.

Jim

ah its old browser that are problems

caniuse.com/#feat=flexbox

display: -webkit-flex;

Will give more css support but not as you say for the older versions

Cheers
Paul

If you add these - does that improve support for older browsers

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

You need to apply any browser pre-fixes before the modern non prefixed display: flex

I'm not sure if this will work as i have no way of testing on those mac versions

Cheers
Paul

Paul, please tell me whether this seems like the correcto way to implement the Safari-fix CSS that you identified:

.yetanothersocial-container { display: -webkit-box; display: flex; }

When I implemented it this way, it had no effect on the spacing problem--but it did remove two of the SM icons.

E.g., see
test.chigov.com/chicago/city-council/547-aldermanic-voting-analysis-uic.html

Jim

Hi jim,

See what you mean

Try instead just

.yetanothersocial-container { display: -webkit-flex; display: flex; }

Cheers
Paul

Paul, as you suggested, I removed this line:
.yetanothersocial-container +.clear { clear: none !important; display: flex; }

The spacing problem remained in Safari. And it returned in Firefox.

Any other ideas?

Jim

.yetanothersocial-container {display: -webkit-flex; display: flex;}
.yetanothersocial-container +.clear { clear: none !important; display: -webkit-flex; display: flex;}

I meant this - does this work

Cheers
Paul

Sorry I misunderstood, Paul.

After I implemented the CSS as you wrote it last, the display works properly in Firefox. But in Safari it still has space between the SM icons and the article text.

Jim

Can you attach a screenshot of how it looks

Cheers
Paul

I've attached screen shots of:

test.chigov.com/chicago/city-council/547-aldermanic-voting-analysis-uic.html

test.chigov.com/chicago/elections/621-obama-vote-for-mayor-emanuel-election.html

Jim