Issue with height of instagram embed

Design help General
1

Has anyone had success embeding instagram links within the webflow CMS.
Regardless of which width I embed them at, they always seem to look bad, either with part of the image cut off, or with a massive space left under the embed

I’ve tried editting the “figure element” to limit the width or height, but when I adjust such settign nothing happens.

Anyhow, can anyone see where I’m going wrong?
read only: Webflow - Dream Big, Travel Far

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi, please add Screenshot of the problem. Maybe clear cache (Looks fine to me).

3

Tried clearing cache, and unfortunately still same issue
here’s an example:

image
image785×911 143 KB

4

Ok. I will inspect the CSS now

5

awesome thank you for that

6

The space is from the editor (Not related to styles you added).
So this is a bug (You should change the Q category).

image
image727×513 131 KB

In general its better to use Instagram posts as embed code - like the official docs :slight_smile:

I really don’t know if webflow support embed instagram posts inside rich-text (Works well on wordpress).

The space come from padding-top by % of the parent.

Very “ugly” solution - but maybe add empty div with X negative top margin after the post - and show this div only if “instagram post” is set

7

Ah okay so you don’t think there’s any way to stop this from happenning within the CMS?

Seems pretty bad that Webflow design an embed system that is supposed to support Instagram posts that … doesn’t properly support Instagram posts :confused:

8

@Waldo can anyone from the Webflow team comment on this issue? :slight_smile:

1 Like
9

Hi @williamsbrad1994, thanks for posting this!

Since Instagram is a third party embed into Webflow, we aren’t actively working on building out exactly how that will render on Webflow sites. It can be quite challenging to adjust the rendering settings for a third party integration as they can update their systems at any time, which would break the flow on many customer sites.

For more control, I would recommend considering the use of an Instagram ➞ New Webflow Collection item flow (this would give you full control of how a collection list of data from Instagram would render on your Webflow site): https://zapier.com/app-directory/instagram/integrations/webflow

However, it looks as though you found a third party solution for the embed and that is rendering quite nicely on your site.

10

Thank you for getting back :slight_smile:

You mentioned that I am using a third party integration, what do you mean?
For the examples given above I am simply pasting the link to the Instagram image into the CMS in the “embed rich content” option.
I imagine the way I have outlined is the only way to have the Instagram embed at a specific part of the post that I like?