Iframe CSS in WordPress does not display on phone in portrait mode

I have been trying to produce, within a WordPress website, a nearly full screen iframe whose size will adjust to the content of the iframe document. I have seen numerous JavaScript solutions that query the DOM of the iframe, but I cannot do that because of Cross Origin restrictions.

I found a CSS hack online that works really well on all resolutions except for phones in portrait mode. Here is the code. You can see it in action at https://freeread.causeaction.com/freesearch/ .

<style>
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; 
}
 
.resp-iframe {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    border: 0;
}
</style> 
 
<div class="resp-container" >
    <iframe id="free_iframe" class="resp-iframe" src="https://freesearch.causeaction.com" allow="autoplay" allowfullscreen></iframe>
</div>

The issue occurs after a search is run and the results display. In Phone Portrait the results are not visible because the height of the iframe becomes so short that they do not appear.
I probably need to add @media queries but I have not found the right CSS to make it display on phone in portrait mode. Any help would be appreciated. I have read that the padding-top: 56.25% is related to the Width of the container even though it is a vertical padding? That doesn't make much sense to me. I tried padding-top of 10%^ and 90% and it doesn't seem to work. Can anyone recommend the CSS to use for Mobile Portrait orientation in this case?

Thank you