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
  • Embed Figma design using Webflow's embed element and set iframe width and height to "100%."
  • Use CSS to set the parent container's height to 100% and make the container flexible using flex.
  • Verify responsive design on Webflow and adjust CSS for different breakpoints if needed.

To ensure that your Figma case study displays at full height within a Webflow page, you'll need to adjust some settings to allow the iframe or embed to expand fully. Here's how you can achieve that:

​

1. Embed Figma Design in Webflow

  • Copy the Embed Code: In Figma, get the embed code for your design.
  • Embed in Webflow: Use Webflow's Embed element to paste this code where you want the project to appear on your page.

​

2. Adjust Embed Settings

  • Set Height and Width in Embed Code: Ensure the iframe includes appropriate height and width attributes. Modify attributes to width="100%" and height="100%" to allow dynamic sizing.
  • Use CSS to Style the Embed: You can add custom CSS in Webflow to ensure the embed adjusts:
  • Set Parent Element to 100% Height: Ensure the section or div containing the embed is set to height: 100vh or an appropriate pixel value to fit your layout.
  • Flexible Container: Ensure the element is flexible, such as using div set to display: flex with flex-direction: column.

​

3. Check Responsive Design

  • Verify Across Devices: Use Webflow's responsive design tools to ensure the Figma embed scales correctly across different devices, making adjustments as necessary.
  • Adjust Breakpoints: Customize CSS for different breakpoints if the embed appears cut off on certain devices.

​

Summary

To display your full-height Figma case study in Webflow without it getting cut off, embed it using the correct dimensions, ensure parent container styles are set to support full height, and verify design responsiveness.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the Webflow hosting platform experience downtime and performance issues, and why does their official status page not accurately reflect these issues? Is it normal for a major hosting provider like Webflow to have these problems?
How can I use the same grid layout for both blog posts and listings in Webflow without encountering the lock icon issue?
How can I make my Webflow modal scrollable on small screens without affecting the scrollability of the content behind it?
How can I connect my new Webflow site pages with GA4 for tracking page hits and obtain the replacement analytics code to place on the site?
How can I style the bullet text of a list in Webflow when editing a blog post in the CMS?
How can I make a button in Webflow append the URL and scroll down the page upon clicking?
How can I integrate Webflow and Salesforce, including styling, success message, and hidden form fields, while keeping the overall functionality of a standard Webflow form? Any tips on the best way to proceed?
Why aren't the radio buttons on my website working in Webflow? I applied the same Group name to both radio buttons, but they still don't respond when clicked. Please help!
What are some alternative website builders similar to Webflow that offer CMS functionality for a specialized news site? I have considered Joomla, Wordpress, and Drupal, but I have no experience with any of them. Can anyone provide insights or recommendations? 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?
How can I embed a Substack newsletter sign-up form onto my Webflow site using HTML? I've tried adding the code to the head tag following the instructions from the Webflow University article on custom code but it doesn't seem to be working. Any advice?
Can someone help me with redirecting a webpage on Webflow to a new URL after printing 20,000 QR codes with the old URL? It doesn't seem like putting the new URL in the 301 hosting page section is working. Thank you.
How can I disable scrolling on everything except the modal div in Webflow using custom code?
How can I make a slider element in Webflow scale according to the elements within it, rather than being cut off on smaller screen sizes?
How do I prevent the success message from scrolling out of view to the bottom of the page after submitting a form on a site built in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?