Calendly

Question

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

网站：dishasharma.ca url : 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>

应该可以了。

这不是最佳做法，但系统因 css 或 iframe 上的 js 操作而被阻止。

Calendly - 对帧内使用媒体查询 css

Calendly - Use media query css for an inframe

css

iframe

media-queries