Calendly embed making scroll problems 

Calendly is a well know software that many websites use. If you don’t know what’s calendly – Calendly is your scheduling automation platform for eliminating the back-and-forth emails for finding the perfect time — and so much more. It’s good software but responsiveness on mobile is not the best if you have a longer form – many fields. Scrolling especially on iPhone will be a disaster.

We tried many things and most of them didn’t work. Until.. it worked. Here’s something for you to try. All you need to do is – remove the scroll bar on iPhone and Safari, other systems where good from the start.

What you can try

With Calendly embeds the scroll bar appears when the embed exceeds the size of the container. When using an inline embed, the two main suggestions to remove the scroll are:

1) Increase the height of the inline embed container to fit the largest content area you will need. Check out our common embed questions for example code for how to remove this scroll bar by increasing the container height (see the increased height of 1000px in the below example).

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT" style="min-width:320px;height:1000px;"></div>

To adjust the height on certain screen sizes, you can work with your developer to use CSS media queries:

@media (min-width: 1025px) and (max-width: 1440px) {
    .calendly-inline-widget {
        height: 1000px;
    }
}

2) Or, switch to either of the other embed options as the popup modal is more consistent
 
Please know that at this time, when using a popup embed, there is not a way to remove the scroll.
 
Note: to remove the scroll bar from the embed when viewing on an iPhone with a Safari browser, you can add the following to your CSS:

.calendly-inline-widget {
    overflow:hidden;
}

This issue has been for some good time around, but we couldn’t find a working solution till now. Calendly team is aware of this and hasn’t yet fixed it.

Our Product team is aware of this limitation and the solution for the iframe to notify the container of its actual height so the embed height can be updated accordingly, and will be looking at this in future improvements to our embed code.

Calendly

If this still didn’t work for you, try to reach out to us as we do Website development and support.