Code Blocks/Embed Code Block: Preview in Safe Mode Issue

I am having an issue resizing the Squarespace embed code box once I add a code snippet. There is a 'Preview in Safe' mode message and button that appears after code has been added (button doesn't function for me) and the box size can't be customized correctly, causing element overlaps and/or extra space below the box. 

I have contacted Squarespace support, which gave me a laundry list of troubleshooting tips regarding my browser - which I dutifully did, to no avail. They told me that they couldn't duplicate the error, but they were using an empty embed code box to demonstrate, instead of an embed code box with code in it. It doesn't seem to matter the source of the code; I'm seeing the issue with both a Convertkit form code and an AddEvent button code. 

Can you share your website URL and the page this is happening on?

Sizing embeds is tricky as the content doesn't load whilst editing! Best you can usually do is some trial and error, save refresh the page, then go back in to edit the page and tweak the code block size. 

Hey Ziggy! Thanks for responding!

https://wholehealthpartners.com/secrets

<a title="Add to Calendar" class="addeventatc" data-id="sm15855969" href="https://www.addevent.com/event/sm15855969" target="_blank">Add to Calendar</a>

<script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

This is the code for the AddEvent calendar button. This was the best I could do, placement-wise. The 'preview in safe mode' error message takes up so much extra space that I have no control over. Squarespace support is basically treating me like I'm an idiot and gaslighting the problem altogether. I'm beginning to wonder why I encourage clients to use this platform. 

Switching over to Fluid Engine has brought on it's share of issues; I'm sure those will be ironed out in the future. I suppose I should manage my expectations. I get frustrated when Squarespace support talks around errors and instead relies on designers/developers to do their work for them - - like YOU did today.

I'm very thankful for your time and knowledge. You've saved my day!

K

12 hours ago, kavsquires said:

I'm very thankful for your time and knowledge. You've saved my day!

Glad that worked, it's a strange thing for the warning message to affect the layout, I'll report it, maybe it'll get fixed in the future. Finger crossed.

I have embedded a ConvertKit Form via a code block (Fluid Engine), however there appears to be a large area of extra space below the code block that I cannot get rid of (see attached screenshot). I have tried CSS to no avail and cannot drag the area/rows up any further than it currently is. Any ideas how I can remove this extra space below the embedded form?

Link to page: https://www.gracemooreyoga.com/mentorship

Any help is much appreciated 🙂

Hi @gracemoore I've stumbled across the same problem and see you managed to fix it on your site. Can you share how you did it? I tried @paul2009's solutions above and still no luck... thanks!

Hey @digitalink, yes managed to sort it! After aaaages trying to find a solution on Squarespace forum I came across this post which expressed the same problem.

@Ziggy shared the below solution which worked for me...

Try adding this to your Custom CSS, hoping it will hide the embed warning message and should allow you to shrink the block so you don't have to leave it overlapping the text block:

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

Hope it works for you too!

Hi @gracemoore , this did the trick! Thank you SO much 🙂

Popping in to say if you found this thread because you’re having this problem with your footer (🙋🏻‍♀️), check out Chris Schwartz-Edmisten’s tutorial on auto updating your copyright year. He shows you how to use a regular text block and avoid the embed warning message altogether: https://schwartz-edmisten.com/blog/auto-update-your-footer-copyright-year-in-squarespace

Hello Squarespace community,

I would like to adjust the height of a code-block, it contains a shopify 'buy button' code. The goal is to move the section underneath up. (as shown with the white arrow in the image below).

The actual button is smaller than the code-block as you can see in the image below.
How can I reduce the code-block preview size in order to gain more freedom in my design?
I've already hit the minimal code-block size by dragging the edges. Is there something I can adjust in the code?

Website link: https://pomegranate-endive-trh5.squarespace.com/

Thanks for any input you can provide,
Sergio 

The solution is to align the code-block to the bottom and dragging the whole code-block up. 

Hi,

I'm having trouble in Fluid Engine using code and embed blocks. I get the message "Embedded Scripts" when I create a button with HTML, which makes the block bigger and affects padding/spacing with other elements.

This seems to be a shortfall with the Editor as I can't remove the error message and position the code block as normal.

@benstevens05

Have a look at this, and add the CSS to your Custom CSS:

https://squarefortytwo.com/squarespace-guides/spacing-issue-on-code-block-warning-message

Thanks @Ziggy - that worked a treat!