If you’re going for the even width header + footer look, and 7.1 is not cooperating, there’s a quick CSS hack you can use.
In today’s video, I’ll share with you not just the 3 lines of code required to make that happen, but where the heck it all comes from and why it works the way it does.
So if you’re interested in the reasoning behind it, make sure to check it out!
Let’s get to it!
Video timestamps
00:00 - What the Issue Looks like
Alright, so let's go ahead and talk about the footer area, the footer sections of Squarespace 7.1, and how you can make the content expand to 100% of the width so that you have the same length of that section as you have for the header area.
Now, you may not notice this difference in most of your projects because there are a couple of factors that need to be in place in order for this issue, let's say, to come up.
00:25 - The Three Factors That Cause the Issue
In most cases, this happens when you have, inside your Site Styles, the spacing set as 1920px or something smaller. At the same time, you're also using the Full layout inside the header area, so you don't have it set to Inset, and you're also looking at the full website on a screen that is larger than those 1920px.
So, the combination of those three things is usually what brings this problem up.
00:47 - Why Increasing the Website Spacing Isn't Enough
Now, of course, one of the easiest fixes here is to simply increase the spacing of your website. However, that's not exactly going to stop the issue because if you look at a screen that is even bigger than whatever spacing you have set in there, the problem is still going to come up.
But it also means that the layout that you have for the content inside the website is going to expand as well. So, if that doesn't make sense for your design, then you definitely have to do it differently.
01:10 - Understanding Why the Header and Footer Widths Don’t Align
Now, the way that we can alter the width of the footer is actually super simple. However, if you've watched any of my previous videos, you know that I like to explain where things are coming from so that you know how you can adapt them for your own projects.
Now, I'm aware that the explanation that I'm gonna give you is very boring and quite technical, but just bear with me. I'm gonna try to make it as short as possible.
So, basically, the reason why the width of the header and the footer are different has to do with the fact that the footer section uses Fluid Engine and the header doesn't.
And the reason why Fluid Engine is affecting the width of the footer is because Fluid Engine creates the grid that we use to be able to set elements inside it, but more specifically, the way that it creates the columns for that grid.
01:51 - How Fluid Engine Calculates the Column Widths
If we take a look at the grid-template-columns property inside Fluid Engine, we're going to see that there are three values creating three main columns.
The first one and the last one are pretty flexible. They simply handle the extra space that is available after the 24 columns in the middle have been set.
And you're going to see that those 24 columns have a width range that goes from 0 until the --cell-max-width value.
Now, looking closer at that --cell-max-width value, we're going to see that there's another calculation, and it's inside that calculation where we have the problem.
Squarespace is using the max-width that we have set for the full site inside the Site Styles, minus the gap that we have for the columns inside that section, as the full width of the area that should be divided between 24 columns.
So, the smaller the spacing we use, the narrower the columns are going to be, and then the less space those columns occupy, the bigger the flexible columns are going to be on the sides.
02:45 - Expanding the Middle Columns
So, the solution here isn't really to get rid of the space on the sides by targeting that space, but instead, by expanding the width of each of the columns (*in the middle) so that they cover more space.
Now, luckily for us, this is super simple to achieve because all we have to do is tell the browser that, for the footer sections, it should use a different max-width value.
03:06 - Modifying the Max-Width Variable
So, the way that we can do that is by simply reusing the variable that Squarespace has in that --cell-max-width equation and then setting that value to 100% or any other value of your choice, depending on your project.
Now, because we're going to be modifying that variable, and that's something that is applied pretty much to everything inside our page, we need to make sure that we're only altering the value of that variable within a specific area.
03:29 - Targeting All Footer Sections or Specific Sections
So, if you want to modify all of the page sections inside your footer because you want them all to stretch out and match the width of your header, then what you can do is target the whole #footer-sections container and change the value of the variable in there.
On the other hand, if you want to play around and have some footer sections that are narrower, matching the width of the content, and some of them wider to match the width of the header, then what you can do is target those specific wider areas through an anchor link or a [data-section-id] or any other selector that you want, and then make the modification at that point.
04:03 - What to Expect in Edit Mode
Now, one thing you're gonna notice once you do this is that, besides the obvious expansion of the footer, if you go back into Edit Mode, things are going to look a little bit different.
You're most likely going to see that the grid for those footer sections is now looking kind of weird. So, the rows are going to be, like, super thin, and sometimes moving around the blocks or expanding them can trigger a little bit of a jitter.
04:28 - Preventing Layout Issues While Editing
So, if that's happening to you, I would suggest using the body:not() exception selector so that the change applies when you're not actively editing the section.
The only caveat here is that, because you're gonna be working with two different widths when you're editing and when you're not, you may have to play around more with the position of the elements because it is going to look different when you're looking at things on the Live site versus when you're not.
04:50 - When to Apply This Workaround
So, I would really recommend doing this when you either have your footer fully done and you're not planning on touching it anymore, or when you have something that is fairly simple that doesn't really require a very specific placement for each of your blocks.
05:04 - Final Thoughts
Now, overall, I know that this is a pretty hacky way to achieve this workaround, so if you have a better option to do this, it may be best to use that one.
That’s all for today!
I really hope that you found this helpful and that you're able to implement it on all of your client projects.
Until next time,
B.
Full code
Custom CSS Window
/*FULL WIDTH FOOTER SECTIONS IN SQUARESPACE 7.1*/
#footer-sections {
--sqs-site-max-width: 100%;
}
