CSS newbie here. I'm trying to eliminate the vertical scroll bar that appears on mobile for a calendly widget.

Widget embed code:

<div class="calendly-inline-widget" data-url="https://calendly.com/lohrandcompany/introduction-meeting-web" style="min-width: 320px; height: 680px;"></div>
<p>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

Formatting looks great in desktop view, but I'd like to eliminate the vertical scroll bar that appears on the page (https://avt.850.myftpupload.com/get-started-now/) in mobile view:

I've tried adding a media query to the custom css section to adjust the widget's height based on device screen size but it doesn't seem to change anything:

@media only screen and (max-width: 780px) {
    .calendly-inline-widget {
        height: 1050px;
    }
}

Please advise!