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 add more text and images/videos to specific project template pages in Webflow without them being repeated on all pages? Do I need to create more components or use properties? Thank you!
Is there an alternative method for adding a nationality dropdown to my website in Webflow without exceeding the 10k character limit for custom embed code?
How can I maintain unique headings for each CMS item on Webflow without them auto-applying to all the CMS pages?
How can I scale divs with their content in Webflow so that the projects maintain their aspect ratio and stack on top of each other, similar to the example provided in the link?
What are the performance improvements of using a custom YouTube embed in Webflow compared to the default YouTube embed?
Why did the autoplay feature for HTML5 videos on my Webflow site stop working on iOS devices?
How can I use Webflow and Shopify ThemeKit to simplify the process of making theme changes and uploading them to Shopify without using Git?
Why are the fields filled in Ukrainian in my Webflow RSS feed displaying as random characters and how can this be fixed?
Is it possible to hide the "thank you" page on Webflow from being indexed by Google?
How can I easily make future edits to exported Webflow sites hosted on Bluehost (or another hosting company) to avoid complications and still have the ability to make quick changes in the Webflow creator? Can you provide guidance on integrating WordPress for blogging with Webflow?
How can I improve the SEO settings on my Webflow site to increase its ranking on Google?
How can I set up a snappy/sticky scroll slider for portraits on my website using Webflow?
What indicators should I search for in the source code to determine if a website was built using the Webflow platform?
How can I play and loop a simple Lottie animation in Webflow, with the animation pausing on hover and resuming on mouse out?
Can Webflow support a site with multiple user levels and types (such as Performer, Agent, and Venue) that require different access and forms? What would you recommend for user admin functionalities?
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 change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission 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?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?