VisualNotes

Must be the p tag around the link causing this. If you change <p> to <div>, the link works. Change <p><a href="https://www.google.com">short links</a></p> to <div><a href="https://www.google.com">short links</a></div>

It seems that you've fixed the problem by now, because I can't reproduce the oversized footer effect you describe on my 27" monitor.

Finding the live chat for help is very easy, for example, from the main menu of your site in edit mode, under Help. https://support.squarespace.com At the bottom right of that page you will find a floating icon, this is the link that opens the live chat box.

So, that's actually what you wanted to achieve, isn't it?

This actually is the footer. It should be possible to reduce the height of that section. Currently with margin-top: auto. Set it to margin-top: 0; and you will see the footer jumping up, but still there is that huge area that has to be reduced. Is this version 7.1? Did you try to edit the footer section - reduce the number of rows for example?

On which browser are you seeing the behavior described in your first question? On my 27" iMac I'm not able to reproduce it (Chrome, Firefox, Safari). For me, the main container's background is orange, the footer's background is white.

Is there any way to prevent the password input field from jumping from the top to the middle of the lock screen when it has loaded? It bothers me a lot and apparently all password protected pages I've seen so far suffer from this annoying effect. On the video below the page is refreshed to show the effect. 20230705-152939-trimmed.mp4

It seems like Squarespace is having connectivity issues at the moment.

It seems like Squarespace is having connectivity issues at the moment.

An alternative would be to design the logo with title and subtitle in a vector application, export it as SVG and include it in the header. I have had good experiences with this, because the SVG is 100% sharp and scalable like an image (thus also responsive). When exporting as SVG you only have to take care that the fonts are converted to paths.

For gallery sections, this additional CSS code inserted in the head of the page solved the problem for me. <style> figure.gallery-grid-item {opacity: 0;} figure.gallery-grid-item[data-loaded="true"] {opacity:1; transition: opacity 1s ease;} </style>

Oh, I'm sorry, I got your two galleries mixed up. I meant it the other way around: of course I absolutely agree with you that the thumbnails of the second gallery load better. Here are the views of loading the thumbnails of both galleries in a simulation of 3G Internet speed. The thumbnails of the second gallery fade in smoothly only after the images are fully loaded - this is the desired effect. First_gallery_loading_thumbnails.mp4 Second_gallery_loading_thumbnails.mp4

I'm not quite sure if you mean loading the thumbnails or opening the lightbox.My problem with the gallery section in version 7.1 is/was that the thumbnails won't fade in as smoothly as they do in the gallery block used in blogs. With a very slow internet connection, you can watch the thumbnails loading almost line by line, which doesn't look good. It would be desirable that they fade in smoothly in the background AFTER loading is fully completed. With your first gallery, I see the desirable effect - the thumbnails fade in smoothly after they are fully loaded. For me this looks very nice, regardless of how fast the Internet connection is. With your second gallery, as described earlier, the loading is rather jerky because the images load in real time as the data is transferred. It actually doesn't load in the background and fade in smoothly afterwards.I was able to solve this problem with the Gallery Section thumbnails in version 7.1 using custom CSS. Please see:

With the gallery section, it has always bothered me that when a gallery page is loaded for the first time, the thumbnails that first become visible in the browser window do not fade in smoothly as expected only after they are fully loaded, but that they load normally, quite jerkily in extreme cases. With a slow internet connection, you can even watch the line buildup of the individual thumbnails. This is not visually appealing. With the gallery block, as used in blogs, this behavior does not occur, here the thumbnails fade in smoothly, and only after they have been fully loaded in the background.As I said, the problem is not noticeable with a fast internet connection, but it is with a slow one. Try setting throttling with the Webdeveloper tool using network analysis: now the unsightly, jerky loading of the thumbnails becomes visible.After seeing that the parent element figure gets an attribute after the image has finished loading, I was able to use custom CSS code to fix the problem for me. This is the code I put in the head of the page that contains the gallery section, hence the style tags. But of course you can also insert custom CSS globally and address the corresponding section with its ID. <style> figure.gallery-grid-item {opacity: 0;} figure.gallery-grid-item[data-loaded="true"] {opacity:1; transition: opacity 1s ease;} </style> Now each thumbnail is smoothly fading in after the loading is complete, even with very slow internet connections.

Yes, animation is turned on. But thumbnails (preview images) do not fade in smoothly after loading as it is the case with gallery blocks, they just load without animation. As said, you can only see this with a slow internet connection.

Gallery blocks and gallery sections behave visually inconsistently. Specifically, I see two visual inconsistencies, and I wonder if they could be improved with custom code. 1) Thumbnails Thumbnails in gallery block (good): Each thumbnail smoothly fades in, only after it is fully loaded. This is how it would be desirable for the gallery section as well. Thumbnails in the gallery section (could be improved): Each thumbnail is displayed during loading, which means you see the line-by-line image buildup while the thumbnails are loading, which is not visually appealing. One would expect a smooth fade in of each thumbnail after it is fully loaded (as is the case with the gallery block). On a fast internet connection you almost don't see this, so it doesn't bother much, but it does on a slow one, where the visual impression is kind of bumpy. 2) Lightbox Lightbox in the gallery section (good): The lightbox fades in softly. So it would be desirable also with the gallery block. Lightbox in the gallery block (needs improvement): The lightbox pops up without animation. One would expect a smooth fade in. Maybe custom code could help. I tried to avoid the abrupt popping up of the lightbox in the gallery block with an animation, which is not ideal with a bright lightbox background: @keyframes fade-in { from {opacity: 0.3;} to {opacity: 1;} } .sqs-gallery-design-stacked-slide img { animation: fade-in 300ms ease-in-out; } Does anyone have an idea to solve the two issues with custom code?

@paul2009 Thank you for sharing your insights and knowledge! It's clear that Squarspace has a tough job, on the one hand evolving the product, but on the other hand ensuring backwards compatibility as much as possible. Of course, we have to expect scripts and CSS classes to change. Sometimes this results in problems with customizations of our own. Here knowledge is everything, so thanks again.

Just use a image section (with lightbox option enabled) instead of single images with lightbox. I like to use the image section even for few images, also because of better responsiveness. The downside is of course that you can't place the images individually.

This is a great feature. What I would like to see in addition is the ability to inherit the password protection of a page to its subpages (as is currently the case with Blog and Portfolio, at least on one sub-level). Currently you have to password protect the subpages of a password protected page individually and the user/customer has to enter the password for each subpage separately.

I would do it like this: Set the animated GIFs as background images of the related .grid-items, and hide the static images on mouse-over.So when you hover the static image, it will be hidden, and the animated GIF (set as background image) will become visible instead.To do this, each grid-item must be specifically addressed in the custom CSS (which is possible with the href attribute of each grid-item), and a background image (animated GIF) has to be defined, which must be uploaded to the content library beforehand to know the URL of the image.But I have to admit that I have no idea how the desired effect should work on mobile. a.grid-item:hover img { visibility: hidden; } .grid-item[href="/portfolio/project-one-..."] { background-image: url("/.../background-1.gif"); background-repeat: no-repeat; background-size: cover; } .grid-item[href="/portfolio/project-two-..."] { background-image: url("/.../background-2.gif"); background-repeat: no-repeat; background-size: cover; } .grid-item[href="/portfolio/project-three-..."] { background-image: url("/.../background-3.gif"); background-repeat: no-repeat; background-size: cover; } /* to be continued for all grid items */

This should work for the pages: .header-title-text { visibility: hidden; } Or also: a#site-title { visibility: hidden; } Of course, it depends on whether you want to make only the text invisible (visibility: hidden;), or whether you want to make the whole element disappear (display: none;).

You have entered an incorrect URL: url(https://static1.squarespace.com/static/5e5d8db…/t/6438b10…/1681436993567/header+background.jpg) won't work. Note the three dots in two places of the image URL in your CSS - in their place should be digits that form the URL of the background image. Copy & paste the correct URL of the image, and it should show up as background for the header.

By the way, fonts have proper names which are case-sensitive. As for Google Webfonts, this is a very helpful tool for dealing with local fonts: https://gwfh.mranftl.com/fonts

If the url of the uploaded font is correct and the name of the font-family is correct, it should actually work, even without the !important property. Here, for example, is my custom CSS, which works well: /*** LOCAL FONTS ***/ /* poppins-300 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-300.ttf') format('truetype'); } /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-regular.ttf') format('truetype'); } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff2') format('woff2'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.woff') format('woff'), url('https://static1.squarespace.com/static/###/poppins-v20-latin-500.ttf') format('truetype'); } /* Overwrite the font-family of all relevant elements */ h1, h2, h3, h4 { font-family:'Poppins'; font-weight: 500; } p { font-family: 'Poppins'; font-weight: 300; } .sqsrte-large { font-family: 'Poppins'; font-weight: 300; } .sqsrte-small { font-family: 'Poppins'; font-weight: 300; } .header-nav-item a { font-family: 'Poppins'; font-weight: 400; text-transform: uppercase; } /* Mobile navigation */ .header-menu-nav-item a { font-family: 'Poppins'; } /* Website title */ .header-title-text a { font-family: 'Poppins'; } /* Blog title */ h1.blog-title { font-family: 'Poppins'; }

Have you tried woff and woff2 font formats? I am successfully using fonts uploaded in these formats (and ttf).