logo
TroubleshootingMobile Responsive Issues

Mobile Responsive Issues

Fix iFrame display problems on mobile in Custom iFrame for Elementor and Gutenberg. Covers content overflow, width settings, responsive height, and iOS scrolling.

Overview

Mobile display issues with iFrames fall into two distinct categories: the iFrame container is not responsive (a setting you control), or the embedded content inside the iFrame is not responsive (controlled by the embedded site). This guide covers both with specific fixes.

Cause 1: The iFrame Width Is Set to a Fixed Pixel Value

If the Width field in Custom iFrame is set to a fixed pixel value (for example, 800px), the iFrame does not shrink on smaller screens. It overflows its container and causes horizontal scrolling on the page.

Fix: Set the width to 100%. This makes the iFrame container fill the width of its parent column or section at every screen size.

  • In Elementor: Content tab, Width, type 100%
  • In Gutenberg: block settings panel, Width, type 100% or leave blank (the block defaults to full width)

Cause 2: The Embedded Content Has a Fixed Width

The iFrame container can be 100% wide, but if the page or app inside it is coded with a fixed minimum width, the content still clips on narrow screens. This is a limitation of the embedded site, not of Custom iFrame.

Examples: A website designed for desktop only, a web app that sets min-width: 960px, or a Google Doc that does not reflow for mobile.

Fix options:

  • Enable the Scroll Bar option so visitors can scroll horizontally inside the iFrame to reach clipped content. In Elementor: Content tab, Show Scrollbar, Yes. In Gutenberg: Scroll Bar, on.
  • Check if the embedded platform offers a mobile-optimized embed URL. Some platforms provide embed codes sized for mobile use.
  • If the embedded content is your own page or app, make that page responsive. Custom iFrame cannot change how the embedded site renders.

Cause 3: Height Is Wrong on Mobile

A height set for desktop is often too tall on mobile (for portrait-oriented content) or too short (for content that stacks vertically at smaller widths).

Fix in Elementor: Elementor's Height field supports per-breakpoint values. Click the responsive breakpoint icon next to the Height field to set a separate height for tablet and for mobile.

Fix in Gutenberg: Gutenberg does not have per-breakpoint height controls. Set a height that displays acceptably at all screen widths, or target the block with custom CSS for mobile:

@media (max-width: 767px) {
  .wp-block-custom-iframe iframe {
    height: 400px;
  }
}

Cause 4: Scrolling Inside the iFrame Does Not Work on iOS

On iOS, touch-scrolling inside an iFrame requires the user to use two fingers. This is default iOS behavior for iFrames. Visitors using one finger scroll the whole page instead of the iFrame content.

This cannot be changed by Custom iFrame. It is a WebKit behavior on iOS Safari and iOS Chrome.

What you can do:

  • Set the iFrame height large enough that the full content is visible without needing to scroll inside it. This removes the need for in-iframe scrolling entirely.
  • Add a note near the iFrame telling mobile visitors to use two fingers to scroll within the embedded content.

Cause 5: The iFrame Looks Fine in the Editor but Breaks on Mobile Frontend

Elementor's editor preview does not always accurately represent how breakpoints render on the actual published page.

Fix: Check the live published page on a real mobile device or using browser DevTools device simulation (F12, then click the mobile icon). Do not rely solely on the Elementor editor's mobile preview.

FAQ

Was this page helpful?

Last updated 1 day ago

Built with Documentation.AI