Jump to content

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

Recommended Posts

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


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!

Link to comment

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

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


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

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?

Screen Shot 2021-08-12 at 16.02.07.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.