How can I remove the scroll bar from the Calendly booking tool in Webflow?

If you're seeing a scroll bar on your Calendly booking tool embedded in a Webflow project, you can usually remove it by adjusting the styling of its container element.

​

1. Edit the Embed Code in Webflow

• Go to your Webflow Designer and locate the page where your Calendly embed code is placed.
• Select the embed element containing the Calendly code.
• Open the Embed Code and ensure it uses responsive attributes like style="width:100%; height:100%;" to adapt to its container.

​

2. Adjust Container Styles

• Select the container element where the Calendly embed resides.
• Set the Overflow property to hidden in the Style Panel to prevent any scroll bars from appearing.
• Ensure the Width and Height settings of the container are appropriately matched to the embed dimensions.

​

3. Use Custom CSS

• If the problem persists, consider using custom CSS:
• Go to Project Settings and select the "Custom Code" tab.
• Add CSS in the Head section to remove scroll bars:

    ```css

    .your-class-name iframe {

      overflow: hidden;

      border: none;

      width: 100%;

      height: 100%;

    }

    ```

• Replace .your-class-name with the actual class used for the container of your iframe.

​

Summary

To remove the scroll bar from the Calendly booking tool in Webflow, adjust the embed and container dimensions, set the overflow to hidden, and use custom CSS if necessary.