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: hidden,clip-path: inset(0),contain: contenton the.calendly-inline-widgetclass - We've added
max-width: 100vwon 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: hidden, clip-path, contain) 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?


