CMS - Embedded tweet - Width overflows on mobile

[GuyP]

Hi all!
I have a CMS post with many embedded tweets inside the Rich Text Editor.
On desktop all is fine.
But on mobile the text overflows wide.

Ideally, I’d want all tweets centered so they look good on desktop.

Here’s the post:

My Product Management Wisdom Toolkit

Here’s how it looks like on mobile (text and all is cut off on right):

You can start to see the issue even if I just use this one tweet which pushes the whole page a bit to the right.
Note the white space on left is wider than the white space on right:

Embedded tweet:

<blockquote class="twitter-tweet" align="center"><p lang="en" dir="ltr">This week&#39;s post: My all-time favorite product management templates<br><br>Inside:<br>✍️ 1-Pagers and PRDs<br>🤔 Strategy templates<br>🤩 Vision templates<br>📢 Go-To-Market templates<br>🤤 Additional goodness<a href="https://t.co/S1baSW0Gzo">[https://t.co/S1baSW0Gzo</a></p>&mdash](https://t.co/S1baSW0Gzo%3C/a%3E%3C/p%3E&mdash); Lenny Rachitsky (@lennysan) <a href="https://twitter.com/lennysan/status/1290664235878449152?ref_src=twsrc%5Etfw">August 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Link:
https://guypeled.webflow.io/post/embedded-tweet-aligned-center

Screenshot on mobile:

Things I’ve tried:
Setting width of tweet to 95% works by using this at the beginning of the embed:

<blockquote class="twitter-tweet" align="center" width="95%"

But:

1. I want to center align all the tweets and seems like adding {center=align width=95%} discards the {center=align} and defaults the tweet to align left.
2. When the site loads on mobile it takes a second until the tweet loads and during that second the width overflows. The perfectionist in me doesn’t like that.
3. I have more than 10 embeds and don’t want to use 95% for all of them if I don’t have to.

#2 is less important than #1 and #3 is even less important.
But I would at least want to solve for #1 and perhaps even #2 since I have many embedded tweets.

Here’s how the 95% width tweet loads:

And here’s a link to the 95% attempt (note that on desktop it disregards the align=center part):
https://guypeled.webflow.io/post/embedded-tweet-aligned-center-95-width

Thanks for reading and hope someone has an idea where to start

P.S - I’m using Embed and not Webflow’s native Twitter insert because the latter makes the page load slower and visually cuts off the height of the tweet.

---

Here is my public share link:
https://preview.webflow.com/preview/guypeled?utm_medium=preview_link&utm_source=designer&utm_content=guypeled&preview=b14fa6c1e21386502b852061fde49a94&workflow=preview

[Fonsume]

Your alignment isn’t being disregarded. The Twitter script swaps out the entire div when it loads in the tweet card, so your original div with the center alignment isn’t even there anymore.

You need to set the max-width of the embed div to the same as the actual tweet card (which is 550px on desktop, might be something else on mobile), then center the embed div (margin-left: auto and margin-right: auto).

I can’t check this on mobile atm, so your mileage might vary there.

[GuyP]

Thanks @Fonsume

Unfortunately, I’m a complete noob with HTML/CSS and don’t know where to set this stuff and how.
How and where do I set the max-width and margins of the embed div?
Do I add something to the blockquote in the specific HTML embed code editor for that tweet in the CMS (if yes, what do I add?), or do I do something elsewhere that is more generic?

Thanks!

[Fonsume]

You do it the same way you style other stuff in a rich text field. Unbind the rich text field from the CMS collection and add a custom embed div to it. Then just click the custom embed div and set it on the right hand side with the css stuff in Webflow. Finally, rebind the field to the CMS collection.

[GuyP]

Thanks @Fonsume but I’ve tried doing this with no success.
Seems I can’t style an HTML embed inside a rich text editor via the webflow pannels.
Am I missing something?
I see the same issue in this question:

Unable to edit style of Custom Code embed in Rich Text Element

Webflow does not allow tag assigning to custom code blocks placed inside a Rich Text element: [image]

Here’s what I’m seeing when I unbind the RTE from the CMS collection, and add an HTML Embed.
The selector field is not editable and there are no styling panels in right panel:

[Fonsume]

Then do it manually in the code:

<style>
.w-embed {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}
</style>

Add this to your page header in the page settings:

(note, this is for the desktop size, you’d need to add other breakpoints in CSS too)

[GuyP]

Thank you @Fonsume !!!
That resolved the issue.

Didn’t know exactly how to add the breakpoint for mobile portrait, but searched a bit and managed to find how.
For future reference, here’s what I used. Posts look good on mobile and desktop now.

<style>
.w-embed {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 479px){
.w-embed {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
}
</style>

The only issue is still #2 above.
When the site loads on mobile it takes about 5 seconds until the tweets load and during those 5 seconds the width overflows.
But unless you have any idea how to resolve that, I think I can live with it as most of my posts will not have that many tweets

Thanks again!

[Fonsume]

Glad to hear it worked. You could try removing everything in the blockquote except for the second <a> tag (which you can empty as well).

<blockquote class="twitter-tweet" align="center"><a href="https://twitter.com/lennysan/status/1290664235878449152?ref_src=twsrc%5Etfw"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[GuyP]

@Fonsume thank you so much!
A combination of emptying the embed + the max width solution solved all of my problems.
I’m forever grateful!