Jump to content

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

Go to solution Solved by Ziggy,

Recommended Posts

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. 

 

I have followed all recommendations in regards to my browser:
 
1. I have the most updated version of Chrome
2. I've opened the editor in both Incognito mode and used an entirely separate browser (Safari)
3. I've disabled all Chrome extensions
4. I've checked that cookies, javascript etc. are enabled
 
... and so on and so forth.
 
If someone can offer any advise, I'd much appreciate it. 
 
Thanks in advance!
Link to comment

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. 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

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. 

Link to comment
  • Solution
Posted (edited)
3 hours ago, kavsquires said:

I'm beginning to wonder why I encourage clients to use this platform. 

It has been a genuinely good platform for clients... FE needs some work to keep this.

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;
}

If that doesn't work, then you can do the same thing in Chrome's developer options, which will temporarily remove the message and allow you to shrink the block.

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 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

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

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

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...

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 🙂

image.png

Link to comment

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!

Link to comment
  • 4 weeks later...
  • 1 month later...

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 

Screenshot 2023-04-19 at 12.19.22.png

Screenshot 2023-04-19 at 12.22.23.png

Edited by Segio
Clarify white arrow, make question more clear
Link to comment
  • Segio changed the title to Resize code-block preview (Shopify button)
  • 1 month later...

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.

image.thumb.png.c2361b35f9be882f7c7ade9dfa10c783.png

 

Link to comment

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

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.