iframe embed gets cut off in mobile version - please help!

Site URL: https://marginalia-manuscripts.co.uk/draft-completion-calculator

Hiya! 

I've been trying to embed a calculator on this page: https://marginalia-manuscripts.co.uk/draft-completion-calculator. As you can see, it looks fine on the desktop version. But when I check mobile, the embedded calculator gets cut off. I've tried a few fixes (such as increasing the height in pixels), with no luck. 

Can anyone help?

Here's the current embed code: 

<iframe src="https://grid.is/embed/calculate-your-draft-completion-date-e5jByADSRIS1kkKZUIEkcA?s=eyJDYWxjdWxhdGUgQ29tcGxldGlvbiBEYXRlLTMueGxzeCI6eyJTaGVldDEiOnsiQzMiOjU3MDAsIkM0IjoxMDA1MDAsIkM1IjoyOTAsIkM2IjowLjgzM319fQ==&showControls=1" width="100%" height="1000" frameborder="0" data-document-id="7b98c1c8-00d2-4484-b592-429950812470"></iframe>
<script type="text/javascript" src="https://grid.is/static/embed/v1/script.js"></script>

Thanks in advance!

I did try your embed on a site and it worked fine, but I can see that it causes a problem on your site so something a bit weird is going on.

One possibility is that little embed script that they've told you to put in. It's actually overriding any height you set while squarespace is doing the editing (it doesn't do anything else). You can see that your height of 1000 is in there and then when you save the page the script runs and the height is set back to about half that. It looks like this causes it to write in a different height, and it's possible that is causing the problem when squarespace lays it out in other layouts.

you could try to just leave that script out and try it with only the iframe and set your height manually. that might work. (note you need to delete the embed block and save the page before adding it back in because of the way that little script works).

If that doesn't help then we can set the height of the calculator explicitly with a style block and that will work too. Add this after the iframe/script code and that should help

<style>
  iframe[data-document-id="7b98c1c8-00d2-4484-b592-429950812470"] {
    height:500px !important;
  }
</style>

Thanks for the help! 

I added the code at the end, as you suggested, but ran into another problem. Now the form doesn't get cut off, but runs into the footer section. 

I tried elongating the page to make space for it, but that didn't seem to work and left a lot of white space on the desktop version. 

Any ideas?

div#block-yui_3_17_2_1_1628779750913_6035 {
    height: 600px;
}

add this into the style block that you used to set the height of the iframe (change the height accordingly). this should make space for the embed correctly and not overlap the footer.

Thanks so much Dave! This worked perfectly.