Footers

How do I stack footer columns vertically on mobile in Squarespace?

Footer sections with multiple columns can overlap or squeeze awkwardly on mobile. Force them to stack vertically using a media query that switches the flex or grid layout to a single column.

Center the stacked content and add vertical spacing between the formerly side-by-side columns for a clean mobile footer.

@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;
  }
}

Build responsive footer layouts with our Footer Layout toolTry it free →

Related Questions

How do I remove 'Powered by Squarespace' from the footer?

How do I change the footer background color in Squarespace?

How do I center all the content in my Squarespace footer?

How do I change the footer link color in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →