How can I display the full height of a Figma case study embedded in Webflow without it being cut off halfway through the page?

If your embedded Figma case study is being cut off in Webflow, it's likely due to height constraints on the embed container or iframe. Here's how to ensure it displays at full height.

1. Check the Embed Code and Container

• Use an Embed element in Webflow where you paste your Figma embed code (usually via the Embed component in the Add panel).
• Many embeds default to a fixed height like height="500". If so, replace it with height="100%" or use style="height: 100vh;" if you want full viewport height.
• Ensure your iframe embed includes appropriate attributes, such as width="100%" and loading="lazy" if needed.

2. Style the Embed Container Correctly

• Select the Embed element’s parent container in Webflow.
• Set height to 100% or auto depending on your layout needs.
• If you're trying to stretch it to cover the full viewport, set the height to 100vh.

3. Avoid Overflow & Set Display Correctly

• Ensure overflow is set to visible on all parent elements. If any wrapper or section has overflow: hidden, it may cut off the embed.
• Set the embed container’s display to Block or Flex, not Inline or none.

4. Try a Responsive Aspect Ratio (Optional)

• If your Figma frame has a specific aspect ratio, you can create a responsive wrapper using padding-top trick (e.g., 56.25% for 16:9).
• But for long case studies, this is less effective. Instead, height must be dynamic or viewport-based.

5. Consider Figma Sharing Settings

• Make sure your Figma file is publicly viewable. Go to File > Share > Anyone with the link can view.
• If embedded content isn't loading fully, restricted access could be a factor.

Summary

To fully display an embedded Figma case study in Webflow, ensure the iframe height is set to 100% or 100vh, the parent container allows full height and visible overflow, and no wrappers constrain the vertical size. Also verify that Figma sharing settings allow public viewing.