Embedded Script in Edit Mode Forces Spacing Issue

I upgraded my page to the new grid editing, and now the spacing for one of my embedded videos is not resolvable. A note stating "this block contains embedded scripts..." resides at the top of the video embed forcing the grid count on the section to be greater than necessary. There is a button to "preview in safe mode" which does nothing. I tried recreating the embed, but the issue persists. What gives?

Embeds are tricky to deal with in the Fluid Engine grid editor. Typically you have to try and guess the size and match that in the grid. Embedded content with stretch the code block to fit, but isn't likely to be responsive so you just have to try and accommodate it the best you can and deal with the spacing.

Can you share your website URL and page so I can get a better idea of what's going on specifically for you?

(I'm not sure the "preview in safe mode button" has ever done anything for me)

2 hours ago, Ziggy said:

Embeds are tricky to deal with in the Fluid Engine grid editor. Typically you have to try and guess the size and match that in the grid. Embedded content with stretch the code block to fit, but isn't likely to be responsive so you just have to try and accommodate it the best you can and deal with the spacing.

Can you share your website URL and page so I can get a better idea of what's going on specifically for you?

(I'm not sure the "preview in safe mode button" has ever done anything for me)

Here's the URL

https://www.coorlasarch.com/residential/wilmette-home-addition

It worked fine before I updated the section to the fluid engine grid editor. It's like that warning during editing is preventing the grid height from being reduced. A bit frustrating.

25 minutes ago, CoorlasArchitecture said:

A bit frustrating.

Yes, I'm sure!

Once that grid has rows they don't disappear, with the old columns they were just the height that the content in them was. 

Can you share the embed code you're using, maybe I can find a technique to help you shrink the code block. (I'm guessing it won't drag any smaller than you currently have it?)

2 minutes ago, Ziggy said:

Yes, I'm sure!

Once that grid has rows they don't disappear, with the old columns they were just the height that the content in them was. 

Can you share the embed code you're using, maybe I can find a technique to help you shrink the code block. (I'm guessing it won't drag any smaller than you currently have it?)

Correct - it will not drag any smaller. It's like that 'warning' label at the top of the embed is preventing it from shrinking.

Here is the embed code:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/697084704?h=e655d88f72&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Thanks for your input on this!

On 1/3/2023 at 2:59 PM, Ziggy said:

Can you try this Custom CSS to hide the warning message?

html.squarespace-damask .sqs-blockStatus {
    display: none !important;
}

It may only work when in the CSS panel, but if it does it will allow you to then go back into editing the page and shrink the block down.

Yes! This worked. There is still a snippit at the bottom that reads "Script Disabled" which is preventing it from being minimized completely. But this worked to reduce the height. Thanks again for your input!

I have a ConvertKit form that I've embedded using the code block, but when I place it next to another block, the other block adds extra spacing below (see screenshot). This happens with both a summary block like in this example and a regular text block. 

Page link is: https://www.cursorandink.com/scbs

Can anyone tell me how to get rid of that extra spacing? Thanks!

On 3/4/2023 at 2:50 AM, digitalink said:

I have a ConvertKit form that I've embedded using the code block, but when I place it next to another block, the other block adds extra spacing below (see screenshot). This happens with both a summary block like in this example and a regular text block. 

Page link is: https://www.cursorandink.com/scbs

Can anyone tell me how to get rid of that extra spacing? Thanks!

Add to Page Header

<style>
  .fe-6402260fbeb48b52588e6c64 {
    grid-template-rows: repeat(2,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto)) !important;
}
</style>

@tuanphan that worked! thank you!

On 1/3/2023 at 8:59 PM, Ziggy said:

Can you try this Custom CSS to hide the warning message?

html.squarespace-damask .sqs-blockStatus {
    display: none !important;
}

It may only work when in the CSS panel, but if it does it will allow you to then go back into editing the page and shrink the block down.

Thanks @Ziggy! This worked for me as I was having the same problem. However as @CoorlasArchitecture said, there's still a "Script Disabled" warning underneath the code block, is there a way to hide that as well as so we can get rid of the spacing below?

Attaching screenshot of this. The code I'm using is to embed a Mailerlite form.

@Bridie This updated code should help that as well:

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

Give it a thumbs up if that worked!

@CoorlasArchitecture apologies for the late update, but I hope this still helps!

Amazing, worked a dream. Huge thanks as always!

20 minutes ago, Ziggy said:

@Bridie This updated code should help that as well:

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

Give it a thumbs up if that worked!

 

@CoorlasArchitecture apologies for the late update, but I hope this still helps!

Cool - This worked. Thank you!

I think I'm having a similar issue. I've tried to do an inline embed of Calendly and am having a tough time shrinking the code block height. I've tried the latest code posted by @Ziggy on Friday (since I was also seeing "Script Disabled" at the bottom) and it did let me shrink the block a bit, but there's still a lot of extra space. Looks particularly exaggerated in mobile view.

url is: https://thedoulaemily.com/home-1

...I think I answered my own question 🤦‍♀️. I think it's holding space for when an event type is clicked and then the calendar availability expands. Blah. :)