Squarespace Footer CSS — The Complete Guide

The Squarespace footer is one of the most under-customized parts of any site. The built-in style editor gives you a handful of color themes, but that's about it. This guide covers six of the most common footer CSS customizations — from removing branding text to building responsive mobile layouts. Every snippet goes in Design → Custom CSS unless noted otherwise.

1. Remove “Powered by Squarespace”

The “Powered by Squarespace” text lives inside a footer block with a specific class. It links back to squarespace.com and sits at the bottom of every page. On Business plans and above, you can remove it through Settings → General → Site Availability. But if you're on a Personal plan, CSS is your only option.

The selector below targets the specific footer branding element without affecting other footer content. The first rule hides the branded link directly. The alternative broader selector catches variations where the text might use a different wrapper element.

This is one of the most searched-for Squarespace CSS customizations, and for good reason — removing third-party branding is the first step toward a professional-looking site.

/* Hide the Powered by Squarespace text */
.footer-block .sqs-block-content a[href="https://www.squarespace.com"] {
  display: none !important;
}

/* Alternative broader selector */
.site-footer .footer-block:last-child .sqsrte-text-color--white {
  visibility: hidden;
  font-size: 0;
}

Result:The “Powered by Squarespace” branding text disappears from your footer. All other footer content — navigation links, social icons, copyright text — remains untouched.

2. Change Footer Background Color

The Squarespace 7.1 footer uses the #footer or .sections--footer selector. The style editor limits you to preset color themes, but with CSS you can set any exact hex, RGB, or HSL value you want.

If your footer has multiple sections or a pre-footer area, you may need to target the specific section by its data-section-id as well. The snippet below covers the most common setup: a single footer section with text and links that need their colors updated to match the new background.

Always update the text and link colors when you change the background. A dark background with dark text is invisible — and visitors will think your footer is empty.

#footer {
  background-color: #0d1b2a !important;
}

/* If footer has multiple sections, target the wrapper */
.sections--footer .page-section {
  background-color: #0d1b2a !important;
}

/* Update footer text color to match */
#footer * {
  color: #e0e0e0;
}

#footer a {
  color: #a8dadc !important;
}

Result: Your footer background changes to the specified color (dark navy in this example). Text becomes light gray and links shift to a complementary teal, keeping everything readable against the new background.

3. Center All Footer Content

Footer blocks in Squarespace 7.1 often default to left alignment, which looks fine on desktop but can feel off-balance, especially on single-column footer layouts. Forcing everything to center creates a cleaner, more symmetrical look.

The trick is that text blocks respond to text-align: center, but social icon blocks and navigation links use flexbox internally. Those need justify-content: center in addition to the text alignment rule. The snippet below handles all three cases.

#footer .page-section .sqs-block {
  text-align: center !important;
}

#footer .sqs-block-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Center social icons row */
#footer .sqs-svg-icon--list {
  justify-content: center !important;
}

/* Center footer nav links */
#footer .footer-nav-list {
  justify-content: center !important;
}

Result: All footer text, navigation links, and social icons are perfectly centered. This works regardless of what alignment is set in the Squarespace block editor.

4. Change Footer Link Colors

Footer links in Squarespace 7.1 inherit their color from the section's color theme. If you've changed your footer background to a custom color (see section 2), the default link colors almost certainly won't work anymore. Override them with a direct CSS rule on #footer a.

Always style the hover state alongside the default state. A visible color shift on hover gives visitors clear feedback that the element is clickable. A subtle transition makes the change feel smooth rather than abrupt.

The snippet below separates general footer links from the navigation-specific links in case you want different styling for each. The .footer-nav-item a selector targets the built-in footer navigation menu that Squarespace adds automatically.

#footer a {
  color: #a8dadc !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer a:hover {
  color: #f1faee !important;
  text-decoration: underline;
}

/* Style footer nav links specifically */
#footer .footer-nav-item a {
  color: #a8dadc !important;
}

#footer .footer-nav-item a:hover {
  color: #ffffff !important;
}

Result: Footer links display in a custom teal color with no underline. On hover, they shift to a lighter shade and gain an underline. Navigation links follow the same pattern but can be styled independently if you change the selectors.

5. Style Footer Social Icons

Social icons in the Squarespace footer use SVG elements inside .sqs-svg-icon--sociallinks. The default styling is minimal — small icons in whatever color your theme dictates. With CSS, you can resize them, recolor them, add spacing, and create hover effects that make them feel interactive.

The color is controlled by the SVG fill property on the .sqs-use--icon element, not by the usual CSS color property. The hover scale effect below makes each icon grow slightly on mouseover, which is a widely recognized interaction pattern for social links.

Adjust the spacing between icons using margin on the .sqs-svg-icon--wrapperelement. The default spacing is tight — 8px on each side gives them room to breathe.

/* Social icon size */
#footer .sqs-svg-icon--social svg {
  width: 28px !important;
  height: 28px !important;
}

/* Social icon color */
#footer .sqs-svg-icon--social .sqs-use--icon {
  fill: #a0a0a0 !important;
}

/* Hover effect */
#footer .sqs-svg-icon--social:hover .sqs-use--icon {
  fill: #ffffff !important;
}

#footer .sqs-svg-icon--social {
  transition: transform 0.2s ease;
}

#footer .sqs-svg-icon--social:hover {
  transform: scale(1.15);
}

/* Spacing between icons */
#footer .sqs-svg-icon--list .sqs-svg-icon--wrapper {
  margin: 0 8px !important;
}

Result: Social icons display at 28px with a muted gray fill. On hover, they turn white and scale up 15%, creating a satisfying interactive effect. Icons are evenly spaced at 8px apart.

6. Stack Footer Columns on Mobile

Footer sections with multiple columns can overlap or squeeze awkwardly on mobile devices. Squarespace's responsive behavior doesn't always handle multi-column footers gracefully — you end up with tiny, unreadable text crammed side by side on a 375px screen.

The fix is a media query that switches the flex or grid layout to a single column below 767px. Each column gets full width, centered text, and vertical spacing between them. This is the same breakpoint Squarespace uses internally for its mobile transitions.

The snippet also re-centers social icons within the stacked layout, since they can drift left when the column switches from flex-row to flex-column.

@media screen and (max-width: 767px) {
  #footer .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }

  #footer .sqs-layout .row .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center;
    margin-bottom: 30px;
  }

  /* Center social icons */
  #footer .sqs-svg-icon--list {
    justify-content: center !important;
  }
}

Result: On screens below 767px wide, footer columns stack vertically with 30px of space between them. All content is centered, and social icons align to the middle of the screen. Desktop layout remains unchanged.

Related Tools