ilseS

@Beyondspace Thank you for sharing the video.  I am using fluid engine and that is where the code block is creating the gap.   The anchor code block needs to stay at the top of the section, and the only resizing it is letting me do is drop it from full width to a box that is 6 segments tall x 2.5 wide.  

 
Also, when I'm making adjustments on mobile it is drastically changing the desktop version and I don't see how to disconnect that activity.  Is there a way to do that because I'm ready to chuck this if not?  Thanks in advance for your response. Appreciate you.
 

Upgrading to FE is not required so unless you need the FE features, you can leave a page section as a Classic Editor section.
Although you can't revert an upgraded section, you can duplicate a page that uses CE sections and recreate your homepage there. By extension if your home page has any CE sections on it, you can duplicate a section and reformat it for use.
If you decide to go this route be sure that you've kept your page URL slugs correct. It's very easy to get them messed up if you don't keep on top of it.

sure, you can do this. the key is to control the image container's height and then set its overflow to auto.
first way, upload an image to somewhere on your site and get the url for it. (maybe have an unlisted or disabled gallery page).  now add a code block and put the following code in. this is for 900px high, but edit as you see fit.
<div style="width:100%;height:900px;overflow:auto;"> <img src="https://your-very-tall-image-url-here" width="100%" /> </div> This is probably quite a good way if your image isn't hosted on squarespace, or you want a lot of control over the embedding because you can put whatever you want in it.
second way is to put an inline image in as you normally would, then find out the block id for that image. You can do this easily with the Squarespace Id Finder chrome extension, otherwise you need to find the block id in the page source. add the following css (either to your custom css in the design section, or wrap it in <style> blocks and put it in a code block on the page).
#block-yui_3_17_2_1_1628966659965_3735 { height:400px; overflow-y:auto; overflow-x:hidden; padding:0; } put your own block id in obviously. change the height to whatever you want. This way is neat because the upload of the image is easier, as its right in the page. got to find the block id though. You might want to think about whether this is a good interaction on mobile though. might end up with double scrollbars. if that's the case then wrap whatever css you put in inside a media query so it only happens on wider screens
@media screen and (min-size:768px) { #block-yui_3_17_2_1_1628966659965_3735 { height:400px; overflow-y:auto; overflow-x:hidden; padding:0; } }  
here's an example:

You can use both. Whether you choose to use Fluid Engine at this time will depend on your client and how comfortable they are editing sections with the new editor. Some users know no different and pick it up very quickly whereas others find it more difficult, time-consuming and frustrating because it is still difficult to align some layouts for tablet devices. 
That said, there aren't any technical issues that prevent you using both Fluid Engine and Classic sections on the same site - or the same page!
Bear in mind that even if you build a new site entirely with the Fluid Engine editor, the client will still use the Classic editor to edit collection pages, like Blog posts, Events and additional information sections on Store pages. These areas of a site cannot use Fluid Engine, at least for the time being (expect this to change in 2023).
Did this help? Please give feedback by clicking an icon below  ⬇️

My site was built by my previous developer and currently have no one managing it except myself, don't think I will want to touch that and break the whole site. But will be unsure if they have future system updates more unnecessary issues like this one will be created. More of trouble than help with their so called "add on features". 

Thanks so much for this walkthrough Paul, I really appreciate it. I've followed it and removed all CSS from the Custom CSS part and also the small amount of code injection. Then refreshed and checked, same error with all CSS removed. I've tried to get this across to SS but they don't seem to respond to my comment about removing it all and it still showing the error. I'll keep trying of course 🙂

Why is this error appearing in my editor?
This week, Squarespace introduced a new editor 'feature' with the intention of highlighting custom CSS errors when users are editing other content. If errors are detected with Custom CSS, a red banner appears in the editor to warn users about the issue. 
Squarespace have done this to try to reduce the number of problems being caused by custom code that users randomly add to their sites without knowing the harm that it can cause.
Recently many more customers reported problems with the editing interface, for example Fluid Engine, but these errors were often self-inflicted - caused by users adding snippets of Custom CSS that interfere with Squarespace. As customers rarely return to the Custom CSS panel after they've added some "magic code", this new error banner should help to highlight the issue and allow them to fix it for themselves.
However, I have seen a number of reports of the banner appearing even when the Custom CSS panel is empty, so there may be some instances of "false flags" where it appears for no good reason. 
How to fix the error
If the error has appeared on your site, my advice is to remove all custom CSS and then check if the error appears. You can do this as follows:
1. Go to Design > Custom CSS 
2. Save a copy of your CSS somewhere safe. A text file is ideal for this. Do not save it in Microsoft Word as this will often cause unwanted changes to the CSS.
3. When you are sure that you have a good backup of the CSS, delete all content in the Custom CSS panel.
4. Save the changes and check to ensure the panel is now empty. When empty, you should only see the label for line 1; nothing else:
     
5. If you have added any custom CSS to any other areas of your website using Code Injection, repeat this process for all remaining code. You may find this in Settings > Advanced > Code Injection and in the Settings panel of individual pages. 
6. When you have removed all CSS, refresh your browser to reload the site (Cmd-R on Mac; Ctrl + Shift +R or Ctrl + F5 on Windows).
7. Return to the page you were editing and check for the error message...
If the error message has gone, your CSS was the likely cause of the error. You will need to check the CSS that you backed up to find the cause of the issue. Understandably, Squarespace Customer Care cannot help you to troubleshoot your own CSS. If you had more than a few lines of Custom CSS, it may help you to pinpoint the cause of the error if you carefully re-insert short sections of your CSS until the error reappears. If the error message is still shown after you have removed all Custom CSS from your site then you know that your Custom CSS is not the cause of the error message. You can now confidently go back to Squarespace Customer Care to tell them that your site shows a CSS error message and that you do not have any custom code on the site. They can then assist you to resolve or escalate the issue. I highly recommend using the live text chat service (which operates at certain times of the day) to do this because it removes the delay between responses and allows you to check that you have been misunderstood. Once Customer Care realise that you do not have any custom code, you should find it easier to get support. Let me know if you have any questions.
Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 I realised what the issue is ...Buttons start out the same in CE and FE, but, if I adjust the vertical padding -as I often do because I find the buttons a bit clunky, it seems they don't render equally in FE and CE. Perhaps to do with cell height? So a button at 0.9em vertical padding looks great in a CE section, but significantly bigger in a FE section, unless I adjust cell padding ...which of course affects everything else.

I've been experimenting with mixing -everything @paul2009 said. Also, little things like buttons cannot be made to match, no matter the sizing in settings, they just render differently in FE.
These little details really bother my thing for symmetry and consistency  (and of course the BIG details like spacing) 

Thanks so much @paul2009 .
That's good to know, and I'd never considered the collection items etc.  My issue is mainly that they think it's "so much easier" (which it can be), but they're not looking at different devices and some of the spacing makes my eyes water. 
Good to know there aren't any technical issues in mixing, though.
Thanks!

I hear you! It's an ongoing challenge to layout FE pages so they look great on tablets and smaller notebooks. It can be done but, in my experience, it often requires the client to compromise on some page designs, and it is also very time-consuming.
Did this help? Please give feedback by clicking an icon below  ⬇️

This is fantastic @tuanphan I've been going round and round trying to give a border to image shapes that don't end up a square around an oval -impossible! This is a great workaround. Many thanks for posting.

This looks like a bug. I recommend that you contact Squarespace Customer Care directly. If they provide you with a solution or workaround, please post it here for the benefit of other users. 

I think you should use a normal image, then we will use CSS to make curve on top left top right corners.
I did an example with image at bottom of page'

div#block-efff2a01b90cc35816e9 .image-block-wrapper { border: 1px solid #d1a556; padding: 10px; border-top-left-radius: 300px; border-top-right-radius: 300px; } div#block-efff2a01b90cc35816e9 img { border-top-left-radius: 300px; border-top-right-radius: 300px; }  

If I understand your question correctly ...you can toggle this on in settings -this will affect both desktop and mobile view. Setting on far right makes all cards the same height regardless of content.
 

To expound a bit. I think SS itself could relatively easily achieve this effect.
Adding it after the fact, with custom code, would be tricky, if doable at all.

DOM elements are block based and the CSS border property address those blocks, so CSS border property can not do irregular shapes.
The shapes feature is achieved with SVG overlays. To add a border with custom code looks to be fairly tricky, if doable at all.

Hey all!
I'm trying to create a border around an Image that is shaped using the Image Shapes feature in 7.1, but can't figure it out. I keep getting just the square image border box as shown (need it to lay flush against the shape).  Also need this to work on any shape, not just the one I selected (attached). Any ideas?
 
Here's the code I'm using: 
 
// Image Border //
.image-block-outer-wrapper {
  border: 2px solid #e85f78;
}
 
Appreciate any help!
~L

Site URL: https://cosmotemplate.squarespace.com/?password=pearler
I'd like to apply a border and shadow to an image. I'm utilising the new image shape feature, and can't seem to figure out which element to target. Thank you!
 

Are there any code wizards out there that know how to increase padding between the text and the highlight feature (please see image).
The website is: https://toolex.net and we are using the feature with H1 headings on the following pages: "Affärsutveckling" (home page), "Digitalisering", "Affärsstöd" and "Profilering".
The site is build with 7.1 and Fluid Engine.

Site URL: https://www.thesoulful.squarespace.com
Hello!
Site URL: https://www.thesoulful.squarespace.com 
Pass: livesoulfully
I am interested in using CSS to apply borders to the images on a website as efficiently as possible.
I referenced the solutions in this thread, however, none seemed to do the trick: 
I got seemingly close with this:
.sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } However, two issues arise:
1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header):
section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image {     border: 1px solid #d1a556 !important;   padding: 10px !important; } 2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid.
Does anyone have any thoughts as to how to implement? 
Thanks in advance!

Site URL: https://mango-kumquat-4x8p.squarespace.com
Hi I am a Squarespace Circle member but of late have not found the responses from staff there overly useful and more generic in nature. I.e. check your browser is up to date and try on other browsers, even after explaining I had already done that.
Hoping someone here maybe able to help, while I have placed this query in the custom code area (because it may indeed need to be done that way), if anyone knows of any cheats through existing templated pages or galleries I would be most appreciative.
I have tried using a portfolio page, added custom code to get rid of the text below the portfolio items (which really should be a simple toggle to switch off but is not). However, once I get to the point of engaging the hover effect and adding my custom image, I realised there is no way to add a custom URL, all of the pages are already created that I want them to click through to and portfolio forces you to a new page with a "/portfolio/URL". Super annoying and no way I am going to recreate all of these nor should have to.
Does anyone either know a way to do this using existing features in Fluid Engine, or some code that will allow a hover effect of Colour to B&W or reverse, or an opacity option when hovering so there is a defined difference when hovering? I am still working through all the articles, but so far no luck with anything.
Thanks in advance 🙂

Or you can simply resize it and then hide it behind another block 🙂

Site URL: https://www.abakusprojects.com/artists/liz-liguori
The new fluid engine has been nothing but a headache for me and I'm surprised someone thought it was a good idea to release it. What used to take me a couple of hours to do now takes me days to get right, and gone is the consistency in spacing that made my website look good. My current experience in designing a page might make me stop using Squarespace.
The problem I'm having now is that a page I created yesterday looks okay on a desktop, but is not working at all on a mobile - all the elements are all over the place, and in one case there is text that doesn't even shows up in mobile view. I get more views on my site through mobile devices and I'm on a deadline to get this right.
Any help would be so appreciated. Right now there isn't anyone available from Squarespace as the live chat is down.

This is a known issue with the new "Fluid Engine" layout tool. There are, as you will have seen, two distinct and separate layouts for mobile and desktop but there isn't a tablet specific layout yet so avoiding layout issues on tablet and smaller-sized screens can be difficult unless you lay the page out specifically to avoid this issue. Of course this isn't always possible. 
Squarespace employees don't routinely monitor this forum for feedback (see the guidelines - item 6) so to pass this feedback to Squarespace, please open a support ticket with Squarespace Customer Care.