CSS Code – Image and Text

Try “clear:left;”, maybe “clear:right;”

The “clear:left;” works BUT it affects my other widgets and aligns all of my social media icons vertically instead of horizontally. Even though it’s in the code below……So that won’t work.

widget-content img {
float: left;
margin-right: 5px;
clear:left;
}

“clear:right;” didn’t work.
Thank you for trying to help me figure this out.

What works, and is just a little bit fiddly, it to only apply the “clear:left;” to the items you want to.
This is what you do:
-remove the “clear:left;” from the img css.
-add a new rule like:
.cleft { clear:left; }

Now, to the items that need it, add “cleft” to the class list of the item.
It is unfortunate that this requires you to hand polish your pages, but that is how it goes.

I’m not exactly sure how to proceed.

The images are coming from an outside source (gravator images) so instead of just copy and pasting the .png that I can find in media or page source, it looks like this:

• <img alt=” src=’https://1.gravatar.com/avatar/f1d18e889bbb59b27454522f1912b7df?s=70&d=identicon&r=G&#8217; class=’avatar avatar-70 photo’ height=’70’ width=’70’ />Jen – Star Crossed Book Blog

Would I just take the info after the src, like I normally do?

https://1.gravatar.com/avatar/f1d18e889bbb59b27454522f1912b7df?s=70&d=identicon&r=G

And secondly, I’m not sure what the class list item is for that specific action.

And finally, would it look something like this although it doesn’t seem as though I’m remotely close:

https://1.gravatar.com/avatar/f1d18e889bbb59b27454522f1912b7df?s=70&d=identicon&r=G {
____________=.cleft
}

THANK YOU SO MUCH FOR YOUR HELP ROSS! It’s greatly appreciated!

You will add cleft to the class of the img block, so it would become:

<img alt=” src=’https://1.gravatar.com/avatar/f1d18e889bbb59b27454522f1912b7df?s=70&d=identicon&r=G&#8217; class=’avatar avatar-70 photo cleft’ height=’70’ width=’70’ />

All I had to do is add ” cleft”

That deletes when I update and save my Edit CSS.