How to control your embed layout and sizing
Updated February 25, 2026·1 min read
Available to all users on all plans.View plans
Calendly adjusts the calendar layout to fit the size of its container. You can change the layout and size to better fit your website or app.
Choose a layout based on width
Calendly’s inline embed has three layout styles. The style depends on the width of the container (called the “parent container”).
Large window layout
Parent element width >= 1100px
Example
<div class="calendly-inline-widget"data-url="https://calendly.com/YOUR_LINK"style="width:1100px;height:700px;"></div>Medium window layout
Parent element width < 1100px and >= 650px
Example
<div class="calendly-inline-widget"data-url="https://calendly.com/YOUR_LINK"style="width:700px;height:700px;"></div>Small window layout
Parent element width < 650px
Example
<div class="calendly-inline-widget"data-url="https://calendly.com/YOUR_LINK"style="width:600px;height:700px;"></div>Remove scroll bars
If you see a scroll bar inside the embed:
- Increase the height in the embed code style="min-width:320px;height:750px;"
- Use data-resize="true" to enable auto-resize
Example:
<div class="calendly-inline-widget" data-url="https://calendly.com/your-link" style="min-width:320px; height:750px;" data-resize="true"></div><script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>Minimum width for mobile
Calendly needs at least 320px of width to show correctly on mobile.
If the embed looks off-center or cut off:
- Check for extra padding or margins on mobile.
- Make sure the container is at least 320px wide.
Test your embed layout
After adding the embed:
- Check layout on both desktop and mobile
- Use your browser’s inspect tool to preview different sizes
- Adjust the container’s size or margins as needed
Was this article helpful?
Let us know so we can improve our content.