Creating a boxed-in footer in Squarespace

Let’s face it, the footer is the part of our Squarespace design we think about last when it comes to adding customizations.

However, that doesn’t mean we can’t show it some love and have it help our site look more custom by giving it a non-default style!

In today’s tutorial, we’ll be looking at how to create a super cool – yet super simple – boxed-in footer style, similar to that seen in some Showit and Shopify templates.

Ready? Let’s go!

Creating columns in your Squarespace footer

First of all, you need to make sure that the template you’re working with has 3 possible input sections inside the footer.

In this example I’m working with Brine, so I have the sections Top Blocks, Middle Blocks and Bottom Blocks. If you’re using one of these templates, make sure you to also have it set to stacked – and not column – inside your Style Editor.

Ok, now let’s start building our footer.

I’m going to add the content I want to showcase within each column to each of the sections (i.e. the content for the left column inside the Top Blocks section, the content for the middle column in the Middle Blocks section and the content for the right column in the Bottom Blocks section.

Here are the blocks I have for each section soon-to-be column:

  • Top blocks – heading 2 and Instagram block.

1. Top blocks on footer.png

  • Middle blocks – logo image and a bit of text.

2. Middle blocks on footer.png

  • Bottom blocks – social icons block and a bit of text.

3. Bottom blocks on footer.png

Alright, so let’s columnize (is that a word?) this thang!

We’re going to use the handy dandy flexbox properties for this.

So, first we have to find out what the CONTAINER that’s holding our 3 sections is called, and set it to flex.

4. Targeting footer in CSS.png

Ok! Footer-inner it is since it’s the direct parent for all the other three sections.

Inside our magical Custom CSS window I’m gonna target it and set the display property.

.Footer-inner {
  display: flex;
}
5. Creating columns in Brine Footer.png

We have our columns!

They look like crap right now but we’re going to be fixing them in just a second.

To do so, now we’re going to target all three individual sections and give them the ability to stretch as needed so they all fill out the same space.

First, let’s see what each section is called!

We have Footer-blocks--top for the top one (amongst all those classes)…

6. Top block footer class.png

Footer-middle for the middle one…

7. Middle block footer class.png

…and Footer-blocks--bottom for the bottom one.

8. Bottom block footer class.png

Since we’ll be applying the same properties to all three, I’m going to group all the selectors and set the flex property to 1 which is the equivalent to setting flex-grow 1 – what stretches the boxes – and flex-basis 0 – what helps our browser disregard their original width so they spread out evenly.

.Footer-blocks--top,
.Footer-middle,
.Footer-blocks--bottom {
  flex: 1;
}
11. Making footer columns in Squarespace same height.png

Alright and now to align the content inside these columns, we’ll be setting making these flex and using the justify-content property to set the alignment.

.Footer-blocks--top,
.Footer-middle,
.Footer-blocks--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
12. Center align footer columns in Brine.png

Perfect! Let’s add our border to the three sections to see what it looks like.

.Footer-blocks--top,
.Footer-middle,
.Footer-blocks--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #ddd;
}
13. Adding border to footer in Brine.png

Good, but how about some padding?

.Footer-blocks--top,
.Footer-middle,
.Footer-blocks--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #ddd;
  padding: 20px;
}
14. Making boxed in footer in Brine.png

Ok, that’s looking great!

Next, I want to reduce the size of that logo so I’m gonna see what it’s called to target it.

15. Targeting image in footer.png

Alright, I’ll use image-block but since I only want to alter the image on my footer I’ll also make sure to use Footer-inner like we did in the beginning.

.Footer-inner .image-block {
  max-width: 200px;
}
16. Reducing size of image in Brine footer.png

Aaaaaand let’s center it…

.Footer-inner .image-block {
  max-width: 200px;
  margin: 0 auto;
}
17. Centering image in footer Squarespace.png

Nice!

Let’s check this baby on tablet mode.

18. Checking font size in tablet.png

The font of my H2 looks way too big here, so I’m going to make it a bit smaller overall – not just for smaller screens.

.Footer-inner h2 {
  font-size: 40px;
}
19. Smaller font size footer in tablet.png

Much better! Now let’s see this on phones.

20. Phone preview.png

Ok, we have to fix this.

Instead of adding a media query to work around what we already did, I’m simply going to leave this to stack as it was doing originally by wrapping our current code inside a media query!

I will be doing this only for the snippets regarding the actual column-making process, so I will leave out the ones for the image and font size since I want those styles to display all the time.

@media screen and (min-width: 640px) {
  .Footer-inner {
    display: flex;
  }
  .Footer-blocks--top,
  .Footer-middle,
  .Footer-blocks--bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #ddd;
    padding: 20px;
  }
}
21. Adding media query.png

So now in phones, our three columns will stack and then on desktop we will still have them neatly side by side!

23. Desktop result after media query.png

Adding other blocks to your footer

The cool thing about this customization is that you can use pretty much any block you want!

Take a look at this example switching the IG block for a newsletter block with floated fields:

24. Desktop result with newsletter box.png

It looks beautiful and it’s still completely aligned with the other 2 columns!

However, make sure that you always check what things look like in the other two screen previews since you may need to adjust something else for the particular block you’re using.

In this case, there’s a slight issue in tablets: the email field is too long.

25. Fixing input size in tablet.png

If we look at it through Inspect Element, we can see that the problem is the field has a minimum width of a set amount of pixels, so we need to overwrite that to make sure it doesn’t go beyond the column.

26. Targeting newsletter block in footer.png

I’ll be using the selector that’s ready for us on the right-hand side of the window and make sure to indicate the changes should be applied to the field located inside the footer, and nowhere else on my site.

.Footer-inner .newsletter-block .newsletter-form-field-wrapper {
  min-width: 0;
}
27. Result in tablet.png

Alright and then in phones…

28. Result on phone.png

Awesome! It looks great.

So there you have it! Now you can create a simple boxed-in footer in Squarespace, to make your template look more custom.

Until next time,

B.

 

Full code

@media screen and (min-width: 640px) {
  .Footer-inner {
    display: flex;
  }
  .Footer-blocks--top,
  .Footer-middle,
  .Footer-blocks--bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #ddd;
    padding: 20px;
  }
}