CSS Tutorial: Customizing Footer sections on squarespace

Today, I'm sharing one of the asked customization on Squarespace. How to create a full-width footer? Or how to customize the different sections on the footer. I am sharing the CSS Code that I use to implement this on any template in the Brine Family (i.e. Rally, Impact, Mercer,Clay et al)

---

Built-in Solution

While the Footer are of Brine Family templates has three sections (Top, Middle and Bottom). Currently, the only built-in option under Site Styles is to customize the color of the the entire footer. The paddings for each section isn’t customizable too.

Hence, I’m sharing the CSS solution below

---

The CSS Solution

Feel free to change the paddings and background color for each section. If you wish to create a full-width instagram block for example, simply adding 0px as the padding-left and padding-right under .Footer-blocks—top

@media screen and (min-width:960px) {

.Footer-inner {
padding-left:0px; 
padding-right: 0px;
padding-bottom:0px;
padding-top:0px;
}


.tweak-site-width-option-full-background .Footer-inner {
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}

 
/**styles for top footer section**/
.Footer-blocks--top  {
padding-left:100px;
padding-right:100px; 
padding-top:30px;
background-color: white;
}
/**styles for bottom section**/
.Footer-blocks--bottom  {
padding-left:100px; 
padding-right:100px; 
background-color: #222222; 
}
/**styles for middle sections**/
.Footer-blocks--middle  {
padding-left:100px;
padding-right:100px;
background-color: #fff;
}


body { overflow-x: hidden;
overflow-y:visible;
}


}

Hope this helps

Join the mailing list to stay in the know and check out our quick courses on CSS hacks and stylish sections.

Easily Create Mega Menus and Pop-out Navigation on Brine Templates