Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Set the embed container height to 100vh or auto and ensure the parent container isn't restricted.
  • Modify the Figma embed URL with &embed_host=webflow and manually adjust the iframe height if needed.
  • Use a parent div with 100vh height and apply flex or grid with align: stretch.
  • Ensure no parent container has overflow: hidden and set overflow to visible in the Style panel.
  • Preview or publish the page, as Webflow’s Designer may not show the correct rendering.

If your Figma case study embed is getting cut off in Webflow, you need to adjust its height settings to ensure it fully displays. Follow these steps to fix the issue.

1. Adjust Embed Container Height

  • Select the embed element in Webflow.
  • In the Style panel, set the Height to 100vh or auto.
  • If using a div block, make sure its parent container doesn’t have a restricted height.

2. Modify the Figma Embed Code

  • Ensure the Figma embed URL uses &embed_host=webflow at the end.
  • If the iframe embed code is being used, manually set the height:
  • Example: <iframe src="FIGMA_URL" width="100%" height="100vh"></iframe>

3. Use Flexbox or Grid for Full Height

  • Wrap the embed element inside a parent div with a height of 100vh.
  • Set the parent div's display to flex or grid and use align: stretch.

4. Check Overflow Settings

  • Ensure that no parent container has overflow: hidden, which can clip the embed.
  • Set the Overflow property (Style panel) of the parent div to visible.

5. Test in Preview Mode

  • Webflow’s Designer might not fully render the embed. Preview the page or publish it to verify.

Summary

Ensure the embed height is set correctly in Webflow, modify the iframe properties, use a proper parent container, check overflow settings, and always preview your changes. These steps should allow the Figma case study to display at full height.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I pass the salutation field from a Webflow newsletter form to Sendinblue via Make (Integromat) without encountering an error?
How can I remove the default iOS input styles from my Webflow site to ensure it looks consistent across desktop and mobile devices?
Can you assist with troubleshooting and resolving issues with Webflow?
Can I create a portfolio site on Webflow using subdomains for multiple example sites, and can they all be published under a single Website Site Plan or would I need separate plans for each site? Can I also export some of the example sites and host them outside of Webflow to save costs?
Is there a straightforward method, such as using custom code or attributes, to showcase individual form submissions for each paid client within their Webflow dashboard, considering the current setup where the form data is sent to Trello and a CMS?
Why doesn't Webflow support webP images despite widespread browser and operating system compatibility?
What does the fastly error message mean when trying to host a component of my site (/en/privacy-policy) on Webflow using an nginx reverse proxy?
Why are the thumbnail images not displaying on certain projects in the exported version of my Webflow portfolio site, specifically on mobile, when they appear fine in the Webflow preview?
Why do all my Webflow site pages have a horizontal overlay, even after trying to hide overflowing content and using elements with 100vh?
Is Wix a good competitor to Webflow?
How can I fix the misalignment issue with the arrow on the first collection item on the projects page in Webflow?
Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?
How can I implement the instructions in this article to disable text area resize in Webflow?
Can text entered in the Webflow CMS be automatically truncated once added to a page? For example, using the first 100 characters of a field as the snippet text on a directory page?
Why can't we have captions under the 25 images in Webflow CMS for the artist websites I'm creating? Can someone assist me with this?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!