Jump to content

Embedded Script in Edit Mode Forces Spacing Issue

Go to solution Solved by Ziggy,

Recommended Posts

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?

SS - No Resolve for Edit to Live View.JPG

Link to comment

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)

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
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.

Link to comment
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?)

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
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!

Link to comment
  • Solution

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
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!

Script Disabled.JPG

Link to comment
  • 1 month later...
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!

CleanShot 2023-03-03 at 14.47.43.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screenshot 2023-03-10 at 16.30.39.png

Link to comment

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

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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

Link to comment
  • 2 months later...

I'm having this exact same problem, with the "embedded script" note and the "script disabled" warning. I see the updated code solutions provided here, but I don't know how to implement them. I tried putting into the MailerLite embed code in a few different places with no result. Where specifically do I insert this code?

Edited by Starlie
Link to comment
9 hours ago, Starlie said:

I tried putting into the MailerLite embed code in a few different places with no result. Where specifically do I insert this code?

Add to Custom CSS.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Did you refresh the page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
17 minutes ago, Starlie said:

Yes, I did.

Do you have any errors in your Custom CSS?

This code is very simple and has been successful whenever I've used it or shared it here.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Would you mind sharing a screenshot of your Custom CSS panel?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
2 hours ago, Starlie said:

Here are screenshots of each

These are screenshots of Code Injection panels, not the Custom CSS panel. You can’t add CSS to these, unless you wrap it in style tags - place <style> before the CSS and </style> afterwards.

You’ll find the Custom CSS panel in Design > Custom CSS.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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.