Skip to main content
Question

Confirmation page bug for mobiles

  • March 11, 2026
  • 0 replies
  • 4 views

This is loaded from their official script: https://assets.calendly.com/assets/external/widget.js

Whats already set:

  • Container min-height: 700px (exactly what they suggest)
  • Container min-width: well above 320px (it's full mobile width, ~375px+)
  • We use overflow: hiddenclip-path: inset(0)contain: content on the .calendly-inline-widget class
  • We've added max-width: 100vw on the widget and its iframe via CSS

The actual problem:
The Calendly widget works fine on mobile until the user completes a booking. At that point, Calendly navigates its iframe to a "You are scheduled" confirmation page. That confirmation page's content is wider than the mobile viewport. Because it's a cross-origin iframe, mobile Safari ignores all CSS containment (overflow: hiddenclip-pathcontain) on the parent and expands the entire page layout to fit the iframe content. This breaks the viewport for the current screen and all subsequent screens.

Key point : This is not an iframe sizing issue, it's specifically Calendly's confirmation page content inside the iframe being too wide for mobile viewports. The scheduling/calendar picker pages render fine. Only the post-booking confirmation page breaks things.

This is a bug in the confirmation page's responsive CSS, not in how we embed it. Can this be looked into?