Embed CSS


I have an issue that I don’t seem to be able to figure out a solution to and it’s driving me nuts. Have a site running on xenforo and have installed a file to to run the oembed. The embed renders but there is this gigantic top-margin that I can’t get rid of.

In looking at the CSS for the oembed, it looks like this:

.twitter-tweet-rendered {
position: relative!important;
max-width: 550px!important;
margin: 7px 0!important;
clear: both!important;
font: normal normal normal 14px/16px ‘Helvetica Neue’,Arial,sans-serif!important;
color: #333!important;

getting rid of that clear: both !important; seems to fix the problem, but because the style sheet renders w/ the !important tag, I can’t override it. Is there any easy fix to this problem?



Can you share a link to the page you’re seeing this issue on? The CSS reset we use at the moment is targeted just to our elements, but sometimes needs some tweaks. I’ll take a look at see if I can refine it a bit.





Appreciate the response. The issue occurs all over my site anywhere you place a twitter embed link and I know lots of other folks using xenforo are having the same issue. For an example of what I’m talking about, check out this link and scroll down to the last post:


See how there is a huge gap between the text and the embed? From what I can tell it’s caused by the CSS on your end. Thanks for the help Ben!

closed #4

closed #5