Pro Theme: Twitter Blocks Mis-sized

[toomuchpete]

When embedding Twitter or Instagram blocks in a post, they are being set to a fixed width and height that makes no sense for the content.

See an example of a published post here. Or a screenshot:

I looked to see if there might be some CSS to tweak, and found that the iframe element itself is being given an inline style with a specific height and width.

[ruenel]

Hello Pete,

Thanks for writing in! By default, the theme has a styling for iframes. To override this default CSS styling and make sure that Gutenberg’s block embed will display properly, you can add this CSS code into X > Theme Options > CSS .

.wp-block-embed .x-resp-embed iframe {
    position: relative !important;
}

We would love to know if this has worked for you. Thank you.

[toomuchpete]

Thank you so much for the quick reply! This resolved the width being squished, but then on smaller breakpoints, the tweet is getting cut off on the bottom.

I followed the instructions from this post and adding the code snippet to functions.php seems to have resolved the second problem for me, which I thought I’d mention in case anyone else finds this helpful.

Thanks so much!

[ruenel]

Hello Pete,

You are most welcome.
It’s god to know that you have figured out a solution to resolve the issue.

Best Regards.