Calendly - Use media query css for an inframe

I am trying to embed calendly in my website. I was able to do it. However, when i view the website from mobile, i need to scroll down the calendar. So i removed the scroll bars. I have used the following code inside "custom liquid" in my shopify store. The solution works for mobile but now when i view the website from desktop there is a big gap between the calendar and the text below it. I used media query but it does not work. I will be grateful if someone can help me with this.

website : dishasharma.ca url : https://www.dishasharma.ca/products/happiness-and-purpose-coaching-per-session Screenshot - https://i.sstatic.net/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>

Solution

seems like syntax error, try below code

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

i missunderstood you, sorry. can you try this?

<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>

Should be work.

Thats not best practices but system is blocked we for css or js manipulation on iframes.