> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt). > Use it to discover all available pages before exploring further. # iFrame Height Fix Fix a cut-off, too-short, or incorrectly sized iFrame in Custom iFrame for Elementor and Gutenberg. Covers fixed height, Auto Height, and scrollbar settings. ## Overview An iFrame that cuts off content or leaves extra white space has a height configuration mismatch. The fix depends on the type of content you are embedding. This guide covers every height scenario with specific solutions. --- ## Cause 1: Fixed Height Is Too Small The most common cause. The **Height** field in Custom iFrame is set to a value smaller than the embedded content. **Fix:** Increase the height value. Common reference heights: | Content type | Recommended height | |---|---| | YouTube video (16:9) | 450px | | Vimeo video (16:9) | 450px | | Google Maps | 400px | | Google Calendar | 600px | | Spotify single track | 152px | | Spotify playlist | 380px | | Typeform (short form) | 400–500px | | Calendly (booking page) | 700px | | PDF viewer | 600–900px | | 3D Flipbook PDF | 600–800px | There is no universal height. Set a value, publish, and check the live page. Adjust until the content displays without cutoff. --- ## Cause 2: Auto Height Is Enabled but Not Working **Auto Height** resizes the iFrame to match the embedded content's height automatically. It works by listening for a `postMessage` event that the embedded page sends when it knows its own height. **This only works when the embedded page actively sends height messages to the parent frame.** | Embed type | Auto Height works? | |---|---| | Same-domain content | Yes — no cross-origin restrictions | | Typeform | Yes — sends postMessage height events | | HubSpot forms | Yes — sends postMessage height events | | JotForm | Yes — sends postMessage height events | | Calendly | Yes — sends postMessage height events | | Google Docs / Sheets | No — does not send height events | | YouTube, Vimeo | No — fixed aspect ratio, use fixed height | | External websites | No — most do not send height events | | Google Maps | No — use fixed height | **Fix for Auto Height not working:** Turn off Auto Height and set a fixed height instead. The embedded page simply does not emit the height messages the feature depends on. Enabling Auto Height does not force the embedded page to report its height. If the page does not support postMessage height events, Auto Height has no effect and the iFrame falls back to its default height. --- ## Cause 3: Content Is Cut Off Despite Correct Height The iFrame height is correct but the content inside is clipped. **Possible reason:** The embedded page has its own `overflow: hidden` CSS, or its content is taller than the visible area and has no internal scrollbar. **Fix:** Enable the **Scroll Bar** option in Custom iFrame settings. This lets visitors scroll inside the iFrame to reach content below the fold. - In Elementor: Content tab > **Show Scrollbar** > Yes - In Gutenberg: Block settings panel > **Scroll Bar** > on --- ## Cause 4: 3D Flipbook PDF Has Height Issues The 3D Flipbook View requires a specific height to render correctly. **Fix:** - Set height to at least **500px**. For A4 documents, 600–800px works well. - Turn **Auto Height off**. Auto Height conflicts with the flipbook layout. --- ## Cause 5: Height Looks Wrong in Elementor Editor but Correct on Frontend Elementor's editor environment renders inside an iframe itself, which can affect how some embedded content reports its own size. Embeds that use JavaScript to calculate height (like some form providers) may measure incorrectly in the editor context. **Fix:** Check the published page directly, not the editor preview. The frontend rendering is the accurate view. --- ## Cause 6: Height Needs to Be Different on Mobile A height set for desktop may be too tall or too short on mobile devices. **Fix in Elementor:** Elementor's **Height** field supports responsive values per breakpoint. Click the responsive breakpoint icon next to the Height field to set a different height for tablet and mobile separately. **Fix in Gutenberg:** Gutenberg does not have per-breakpoint height controls. Set a height that works acceptably across all screen widths, or use CSS targeting the block to apply mobile-specific heights. --- ## FAQ The form provider may not send postMessage height updates for all form states. Multi-step forms sometimes only send the initial height. After the visitor fills out a step and the form expands, the height update may not fire. Set a fixed height large enough to cover the longest form state. Google Docs does not send postMessage height events, so Auto Height does not work. Set a fixed height of 700–900px and enable the Scroll Bar option so visitors can scroll inside the document. The height is set larger than the embedded content. Reduce the fixed height value until the white space disappears. For content with variable height, enable Auto Height if the platform supports postMessage events. Percentage-based heights for iFrames require the parent container to have a defined height. In most WordPress layouts, the parent container's height is determined by its content, so percentage heights on an iFrame produce unpredictable results. Pixel values are the reliable option. --- ## Related Guides - [iFrame Not Showing](/troubleshooting/iframe-not-showing) - [Auto Height Adjustment](/features/auto-height) - [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) - [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)