如何添加媒体查询调整Calendly部件CSS解决移动端滚动条问题

你写的媒体查询未生效的核心原因是：HTML行内样式的优先级高于类选择器的样式，你在<div>标签的style属性里直接写了height: 680px，会覆盖自定义CSS区域写的.calendly-inline-widget高度规则。

方案1：最低成本快速修复 #

在原有CSS属性后加!important声明，强制覆盖行内的高度设置即可：

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

额外添加的overflow: hidden规则可以彻底避免内容溢出产生滚动条。

方案2：更易维护的规范写法 #

移除行内的高度定义，全量通过CSS控制不同设备的高度，不需要依赖!important强制覆盖：

1. 修改嵌入代码，删掉style属性中的height配置：

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

2. 在自定义CSS区域添加全端适配规则：

/* 桌面端默认高度 */
.calendly-inline-widget {
    height: 680px;
}
/* 780px以下移动端适配 */
@media only screen and (max-width: 780px) {
    .calendly-inline-widget {
        height: 1050px;
    }
}
/* 小屏移动端按需额外适配 */
@media only screen and (max-width: 480px) {
    .calendly-inline-widget {
        height: 1100px;
    }
}

优化建议 #

可以在Calendly的data-url末尾添加参数隐藏非必要元素，降低部件整体需要的高度：
在原有链接后加?hide_event_type_details=1&hide_gdpr_banner=1，分别对应隐藏事件类型详情、隐藏GDPR横幅，可减少部件的高度占用，无需设置过高的高度值。

内容的提问来源于stack exchange，提问作者Kourtney Kearney