Skip to main content
Question

Sschedule screen breaks form layout mobile

  • March 11, 2026
  • 3 replies
  • 9 views
C

Hi I have been trying to fix an issue with calendly where when i get to the you are scheduled screen it breaks my form… you can see it breaks out of the mobile phones screen / viewport and enlarges the screen. I can then move this page around with my finger. the steps with in the calendly form before this are all perfect. I have tried many different solutions but it will not fix the issue.

SO:

 

What happens:

  • Calendar selection, time selection, and "Enter Details" steps all render correctly within the mobile viewport
  • When the confirmation/"You are scheduled" page loads inside the iframe, the entire page layout expands beyond the screen width
  • The form's title/description become oversized and cut off on the right
  • The user can scroll/pan horizontally (page is wider than the viewport)
  • This persists when navigating to subsequent screens
  • Pinching to zoom out snaps it back to the correct scale

What  tried (none worked):

  • overflow: hidden !important on the .calendly-inline-widget and its iframe
  • max-width: 100% / max-width: 100vw / width: 100% on widget and iframe
  • overflow-x: hidden on html and body elements
  • position: relative on html/body to create a proper containing block
  • touch-action: pan-y on html/body to block horizontal panning
  • contain: content on the widget container (CSS containment)
  • clip-path: inset(0) / -webkit-clip-path: inset(0) on widget and iframe
  • maximum-scale=1 on the viewport meta tag
  • Clearing the Next.js build cache and hard-refreshing

Environment:

  • iOS Safari on a real iPhone
  • Calendly inline widget via initInlineWidget()
  • Embed URL includes hide_event_type_details=1&hide_gdpr_banner=1

Root cause: The Calendly confirmation page renders content inside the iframe that is wider than the mobile viewport. Mobile Safari expands the layout viewport to fit the iframe content, and none of the standard CSS containment techniques prevent this for cross-origin iframes.

3 replies

C
  • Calforce50652
  • New Community Member
  • March 11, 2026

​@coachingpool - just to confirm, are you using the  data-resize=”true” attribute in your calendly code? This will automatically resize the widget when content in the iframe changes.

 

Alternatively, you can also listen to window messages from the iframe which posts the updated height / width.

https://www.youtube.com/@calforce | https://calforce.pro | support@calforce.pro
C
  • coachingpool
  • Author
  • Community Member
  • March 11, 2026

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

What we've 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: 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: 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 for them: 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 their confirmation page's responsive CSS, not in how we embed it.

C
  • Calforce50652
  • New Community Member
  • March 11, 2026

The official script won’t automatically resize the iframe unless you explicitly add the resize attribute to the div that renders the calendly widget. You’ll need to add this attribute for the confirmation page to work.

https://www.youtube.com/@calforce | https://calforce.pro | support@calforce.pro
Enroll in Calendly’s Research Community” style= Need Help? Visit 'Get Help. Give Help.'
Terms & ConditionsCookie SettingsAccessibility statement