How to overwrite CSS elements loaded from CDN?

[Maxxius]

Hello, I'm trying to style some embedded cards like reddit and others, to add ba white backgroundon a custom skin. However I can't seem to override its styles what come from this file:

https://cdn.embedly.com/css/all.f42da7e9.css

if I add to custom.css

.card.reddit .reddit-post

.card.reddit .reddit-post {background:#fff; background-color:#fff}

nothing changes on refresh.

but if I add this line when in inspect element - then voila - bg changes.

[opentype]

try something like background: #FFF !important;

[WP V0RT3X]

In my themes I use .embedly-card to make those embeds fit to the post background. !important isn't necessary in that case.

[bfarber]

Does it embed inside a frame, or directly into the page?

[Maxxius]

On 9/9/2020 at 9:16 AM, opentype said:

try something like background: #FFF !important;

important does not work in this case

On 9/9/2020 at 9:29 AM, V0RT3X666 said:

In my themes I use .embedly-card to make those embeds fit to the post background. !important isn't necessary in that case.

thanks, I'm onto something here.

Any idea how I could remove those grey borders around the reddit post or reduce the white area which I marked in red?

Edit I added margin: 0% 6% 0% 0%; to the css class and it seems to have reduced the white area nicely. but is that the way to go what do you think @V0RT3X666?

@bfarber it is in a frame I assume.

Edited September 10, 2020 by Maxxius