Webflow sync, pageviews & more.
NEW
Answers

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

To remove the scroll bar from the Calendly booking tool in Webflow, you can apply custom CSS to hide it. Here's how you can do it:

1. Select the element that contains the Calendly booking tool on your Webflow page. This element might have a class or ID assigned to it, or it could be a specific HTML tag like `

`.

2. Open the Webflow Designer and navigate to the Settings panel on the right-hand side.

3. Click on the Custom Code tab, and then select the `` section.

4. Add the following CSS code to the Custom Code section:

```css

```

5. Save your changes and publish your site.

This CSS code targets two classes used by Calendly, namely `.calendly-inline-widget` and `.calendly-widget`. We set the `overflow` property to `hidden` for these classes, which effectively hides the scroll bar.

Remember to replace `.calendly-inline-widget` and `.calendly-widget` with the correct class or ID that wraps the Calendly booking tool on your specific Webflow page. You can inspect the element using your browser's developer tools to find the appropriate selector.

Once you apply this CSS, the scroll bar on the Calendly booking tool should be hidden, providing a seamless user experience.

Rate this answer

Other Webflow Questions