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.