Invisible padding/margin around Calendly form & inside iFrame

Hi there!

Thank you for reaching out, and I’m glad to hear that the data-resize="true" feature is working for your use case! I understand the frustration of dealing with unwanted internal padding/margin around the embedded Calendly widget, especially when it's affecting your layout and causing issues on mobile.

Here’s a breakdown of the current limitations and what you can do:

What’s Happening

Calendly embeds are rendered within a secure iframe, which means you can’t directly manipulate the internal content (like padding or margin) with your site's CSS. Unfortunately, the internal spacing is controlled by Calendly, and there’s no official way to completely remove the internal margin or padding from within the iframe.

What You Can Do

1. Use data-resize="true" for height adjustments: This is the best way to handle dynamic height adjustments for different screen sizes, but it won’t eliminate the internal padding.

2. Zero out outer container styling: For best results, apply margin: 0 and padding: 0 to the wrapper element that contains the Calendly iframe. For example:

   .calendly-inline-widget { margin: 0 !important; padding: 0 !important; box-sizing: border-box; }

3. Avoid negative margin/padding hacks: While this may work as a quick fix, it’s not ideal for responsiveness, especially on mobile. Negative values can break the layout and cause shifting issues. If you absolutely need to apply a negative margin, consider using media queries to target specific screen sizes and test thoroughly across devices.

4. Use media queries for mobile responsiveness: This can help adjust the layout and fix issues on smaller screens. Here’s a basic example:

   @media (max-width: 768px) { .calendly-inline-widget { margin: 0; padding: 0; } }

5. Test with different embed types: If the mobile experience is critical, consider switching to the popup widget for better handling of internal whitespace.

Currently, there is no official or permanent fix for completely removing internal padding or margin from the Calendly embed iframe. This behavior is a part of Calendly's design and security model. The best approach is to fine-tune your external layout and use media queries to ensure the layout is responsive.

If you continue to face issues, feel free to share specific examples (such as screenshots or a URL) with Calendly Support at support@calendly.com, as feature requests for improved control over the iframe layout are always welcome.

Hope this helps, and let me know if you need further assistance! 😊

Hello,
thank you for the info!

What would be great: Introducing a new query param to remove all internal padding or margin. I’m a developer my self and this shouldn’t be too hard to solve :)

Kind regards

Alexander

Why is this not fixed yet!!! This can’t be that hard to fix TBH and it’s really a pain to use your integration as an embed when you guys add this ridiculous padding and margins around the widget.

I agree with ​@Morten15712 and ​@Alexander 

Calendly seems to be limiting how much we can customize or optimize their embedded form within web pages.

There is a lot of unnecessary padding and margin between the fields, and even with only the basic required fields, the form requires scrolling. Having a scroll within an embedded form is not a great user experience, especially when there is enough space to display the fields properly.

I’m not sure why their development team has not addressed these real-world usability issues or provided better flexibility for customizing the embedded form.