Footer Layout Generator

Fix your Squarespace footer on mobile. Build a responsive multi-column layout with proper stacking, spacing, and alignment for every screen size.

Why this matters

Squarespace footers with multiple columns often collapse into a jumbled mess on mobile devices. Columns overlap, text alignment breaks, and social icons end up in strange positions. This tool generates clean CSS that gives you a proper desktop grid and a readable mobile stack — no code knowledge required.

/* Footer Layout — Generated by Squarespace Tools */

/* Desktop Layout */
.sections-footer {
  background: #111111;
  padding: 60px 0 60px;
}

.sections-footer,
.sections-footer p,
.sections-footer li,
.sections-footer span {
  color: #cccccc;
}

.sections-footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sections-footer a:hover {
  color: #999999;
}

.footer-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-section .content-wrapper {
  padding: 0;
}

.sections-footer .sqs-svg-icon--list {
  text-align: center;
}

.sections-footer .footer-copyright,
.sections-footer .footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Mobile Layout */
@media screen and (max-width: 768px) {
  .footer-sections {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 24px;
    text-align: center;
  }

  .footer-section {
    padding: 20px 0;
  }

  .footer-section .content-wrapper {
    padding: 0;
  }

  .sections-footer .sqs-svg-icon--list {
    text-align: center;
  }

  .sections-footer .footer-copyright,
  .sections-footer .footer-bottom {
    text-align: center;
  }
}

How to add this to Squarespace

1. Copy the code above.
2. Go to Design → Custom CSS.
3. Paste the code at the bottom of the editor.
4. Click Save. Your footer will now use the new responsive layout on all devices.
5. If you chose the Accordion mobile layout, you will also need to add a small JavaScript snippet via Settings → Advanced → Code Injection → Footer to toggle the sections open and closed.