DIY | Library | Footer

Footer Styling Tips Using Squarespace CSS

This post is all about customising the footer of your Squarespace website using CSS. Whether you want to adjust spacing, hide certain elements, change fonts, or tweak the layout on mobile, these Squarespace footer CSS snippets will help you get started. You’ll find each block of code tucked into the accordions below for easy access.

As I work on more projects, I’ll keep adding useful tweaks and refinements here—so feel free to check back. Got a footer question or want to see something specific added? You can always reach me at sarah@foubography.com.

• Footer | Entire Footer Always Visible

  #footer-sections {
  position: fixed!important;
  width: 100%!important;
  bottom: 0!important;
  z-index: 99!important
  }

• Footer | last section of the footer always visible

  #footer-sections .page-section:last-of-type {
  position: fixed!important;
  width: 100%!important;
  bottom: 0!important;
  z-index: 99!important
  }

• Footer | first section of the footer always visible

  #footer-sections .page-section:last-of-type {
  position: fixed!important;
  width: 100%!important;
  bottom: 0!important;
  z-index: 99!important
  }

• Footer | second section of the footer always visible

  #footer-sections .page-section:nth-child(2) {
  position: fixed!important;
  width: 100%!important;
  bottom: 0!important;
  z-index: 99!important
  }

• Footer | Border

  #footer-sections {
  border-top: 1px solid #000
  }
  

• Footer | Box Shadow

  #footer-sections {
  box-shadow: 0 -5px 15px #333
  }

Related posts

This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.