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: .

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.