0

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

网站：disashharma.ca 网址：https ://www.disshasharma.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>
4

1 回答 1

0

好像语法错误，试试下面的代码

<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 操作。

于 2022-02-26T22:19:10.453 回答