Calendly-使用媒体查询css作为基础架构

Question

我正在尝试将calendly嵌入我的网站。我能做到。但是，当我从手机上查看网站时，我需要向下滚动日历。所以我删除了滚动条。我在"；定制液体"；在我的shopify商店里。该解决方案适用于移动设备，但现在当我从桌面查看网站时，日历和下面的文本之间有很大的差距。我使用了媒体查询，但它不起作用。如果有人能帮我，我将不胜感激。

网站：disasharma.ca网址：https://www.dishasharma.ca/products/happiness-and-purpose-coaching-per-session屏幕截图-https://i.stack.imgur.com/2Jwtn.png

<div class="calendly">
<iframe id="myIframe" width="100%" height="1050px" scrolling="no" frameborder="0"> 
</iframe>
</div>
<script>
let myIframe = document.getElementById("myIframe");
let url_string = "https://calendly.com/disha_sharma/session";
let calendlyBackgroundColor = "background_color=e9f4f5";
let adsURL = url_string+"?"+calendlyBackgroundColor;
myIframe.src = adsURL;
</script>
<style type="text/css">
@media only screen and (min-width: 800px) {
.calendly{
height="850px";
}
</style>

Answer 1

似乎有语法错误，请尝试以下代码

<style type="text/css">
@media only screen and (min-width: 800px) {
.calendly{
height:850px; }
} 
</style>

对不起，我误解你了。你能试试这个吗？

<style type="text/css">
iframe#myIframe{
height:830px;
}
@media only screen and (max-width: 1022px) {
iframe#myIframe {
aspect-ratio: 678/882;
height: auto;
}
}
@media only screen and (max-width: 780px) {
iframe#myIframe {

aspect-ratio: 2/3.7;
height: auto;
}
}
@media only screen and (max-width: 413px) {
iframe#myIframe{aspect-ratio: 2/4;}
}


</style>

应该是工作。

这不是最佳实践，但系统被阻止了——我们在iframe上操作css或js。