playfulphoenix

I ended up 'solving' this by picking a static gradient art background for pre-footer sections, such that solid footer colors blend into them uniformly. So not really a solution so much as avoiding the problem, but it accomplishes what I was trying to do.

Note: As the website is under construction, it is password protected Hoping this is as simple as 'I missed a configuration option in the WYSIWYG editor', but if so, I haven't been able to find it 🙂 For a website I'm building, I'm wanting the footer to behave much like "Dynamic" headers do by default - I want them to inherit the foreground text color and the background of the final page section preceding them, and thereby have an 'integrated look' that does not look like a discrete footer. The footer for this website is about as minimalist as it gets - a copyright line pinned to the left corner, and a link list pinned to the right. So I am convinced that, for this website, it is the right approach to take aesthetically. The challenge for me has been replicating this behavior consistently across the website. The last section of a particular page may use a different color theme than other pages, and on a few pages I leverage an animated art background. As aforementioned, the behavior I want for the footer is to simply behave as an extension of the preceding section from a style perspective - that is, match the text color, and extend the background of it. Therefore, I have had to customize the CSS for the footer background and text for each page, to ensure it matches the prior section. For pages with sections that have static color backgrounds, it's easy enough to add CSS that is scoped to that page, and adjusts the footer foreground and background color to match. This looks great! The challenge is when I use an animated art background in the last section. If I simply color match the primary color of the art, it doesn't look great because the boundary between the section and footer is glaring and obvious, After some experimentation, I just haven't been able to come up with a way to do this. I've tried absolute positioning of the footer and over-extending the prior section, but I can't get this to do anything but have the footer expose the page color beneath. I've also replicated the art background of the prior section for the footer itself, but this enacts a performance penalty on client devices, and still doesn't look convincing as the animations are separate and therefore still retain an ugly boundary line between them. Is there any way to accomplish what I am describing with CSS (or native functionality)?

Appreciate the suggestion, @tuanphan! I did as you suggested, and stylized the section to match, and the exact same issue recurred. However, in replicating it in this manner, I think I've discovered the root cause: if, for a section, the horizontal gap width is set above ~35px or so, this problem occurs, and the severity is exaggerated the larger the gap with is set to. Curious if anyone can replicate this, but that reads to me as a bug with whatever layout logic Squarespace uses. Will spend some time today to interrogate this further/understand the bug better.

Note: As the website is under construction, I must have it password protected I have a bizarre issue with the width of certain content sections that I can't, for the life of me, determine a root cause for. Unpredictably, some sections of some of my pages will not wrap their contents when the browser width is on the narrower side, but still above the mobile breakpoint. The top and bottom sections respect the width of the viewport, but the middle section does not. Instead, the section of the page will start to extend beyond the right edge of the page (or, to put it more technically, will maintain a width larger than the width of the viewport) at a viewport width of ~1250px. As the width shrinks, more and more of the content of the section overflows beyond the right edge of the browser window and is not visible unless the user scrolls horizontally. This DOES NOT affect any other section of the page, which wraps its contents as you'd expect, to remain within the viewport width. I have literally built and rebuilt each section on this page manually several times, and have had this issue appear or not appear in most of the sections individually, without any actual comparative change to the contents of the section or the layout of the blocks within it. I've also tried removing any and all custom CSS or code injection, and it has no effect on the presence of this issue. What else can I try to troubleshoot this?