Streaming live at 10am (PST)

Styling issue for Twitter rich embed

When embedding tweets on my blog - using the rich media embed option - tweets get cut off on mobile but displays fine on desktop:

Any idea what might be wrong?

I can’t seem to find a way to apply specific styling for rich media embeds. On the other hand I’d expect these work out of the box, so I probably made a mistake elsewhere :thinking:

Here is my Read-Only page style template (scroll down for rich media): Link

Hi @jwb. Have you got a screenshot of what you’re seeing? I found an empty embed on the page you shared. Is this where you want the tweet to go?

I didn’t find any embeds on the published page you shared. Do point me in the right direction :slight_smile: .

1 Like

Woops! Try having a look again and here’s a screenshot of the bug on mobile for reference:

okay, now I’m seeing the embeds :slight_smile: . So, the issue seems to be with the margin applied to the embed. However, from what I can see atm, your header is what’s causing the side-scroll as well. Take a look at both and if that’s not fully solved your problem, let me know and I’ll take another look tomorrow or Tuesday. It’s a Sunday after all :slight_smile: .

1 Like

Greatly appreciate your help!

I looked a little closer and couldn’t quite see what you’re seeing. But it clued me in to looking at the style of the tweet in mobile and found this:

As soon as I change that value to say 85% it shows all of it. However I have no idea where its pulling this padding from but that seems to be the key to fixing this.

@jwb glad you found it! There’s some built-in styling that gets applied to embeds within rich text blocks so I’d assume that’s where this is coming from.

1 Like

Hi Sarah,

Re-opening this old thread because I kinda gave up and started posting screenshots of tweets instead of using rich embeds. However, now I’m back and keen to find a proper solution so that me and my blog writers can use your feature as it was intended.

To help you troubleshoot with me, I’ve inserted the tweets into one of your preset templates thus ruling out any errors that I might’ve caused in my own custom design.

As you can see on this page below there’s a similar error where the height of the tweet gets cut off and it seems to happen because of this variable padding in the figure element that I referenced above: Master your new template in 5 easy steps

Trouble is, I have no idea where this padding is added from. After messing around with applying a custom width on the rich embed within the blog, I noticed that the padding changed – so it somehow seems related. But again, I don’t have any control over it.

Do you have any idea what might be going on and how to address it so I can use Tweet embeds as intended?

Will take a look at this soon :slight_smile:

This is indeed a known bug. I think it has to do with embedly’s (which webflow uses for embedding multimedia) problems. Recently someone from the Webflow team wrote that they are aware and submitted ticket to the embedly as this is something on their side.

Hopefully this will be fixed.