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

【问题标题】：Add media query to adjust calendly widget css based on screen size添加媒体查询以根据屏幕大小调整日历小部件 css
【发布时间】：2021-11-09 04:15:16
【问题描述】：

这里是 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;
    }
}

请指教！

【问题讨论】：

标签： javascript html css wordpress calendly

【解决方案1】：

啊哈！

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

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

做到了！

【讨论】：