javascript - 添加媒体查询以根据屏幕大小调整日历小部件 css

Question

CSS新手在这里。我正在尝试消除出现在移动设备上的日历小部件的垂直滚动条。

小部件嵌入代码：

<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>

格式在桌面视图中看起来很棒，但我想消除移动视图中页面（ https://avt.850.myftpupload.com/get-started-now/ ）上出现的垂直滚动条：

我尝试将媒体查询添加到自定义 css 部分以根据设备屏幕尺寸调整小部件的高度，但它似乎没有改变任何东西：

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

请指教！

Answer 1

啊哈！

我只需要指定移动 MIN 高度：

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

做到了！