Your Squarespace footer looks perfect on desktop. Three tidy columns with your logo, nav links, and social icons. Then you check it on your phone and the columns are smashed together, text is overflowing, and the social icons are halfway off the screen.
This is one of the most common complaints in the Squarespace forums, and it happens because the footer section in 7.1 does not handle responsive column stacking well by default. The fix is CSS Grid with properly structured media queries.
The Three Most Common Footer Problems
Almost every broken Squarespace footer on mobile comes down to one of three issues. Understanding which one you have determines the fix.
Columns that won't stack. Your three-column desktop footer stays in three columns on mobile, making each column unreadably narrow. This happens because Squarespace uses flexbox for the footer layout and the flex-wrapproperty isn't triggering at the right breakpoint.
Text overflow and horizontal scroll.Long business names, addresses, or copyright text extends past the viewport edge, causing the entire page to scroll horizontally. This is caused by fixed-width containers that don't respect the mobile viewport.
Misaligned social icons. The social icon block centers differently than the text blocks, creating visual misalignment. Or the icons are too large and wrap to multiple rows unevenly.
Forcing Column Stacking with CSS Grid
The most reliable fix replaces the default footer layout with CSS Grid. This gives you explicit control over how columns behave at every breakpoint. The key selector is .footer-sections for the outer container and .footer-section for each individual column.
/* Override default footer layout with Grid */
footer .content-wrapper {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 60px 40px;
}
/* Stack to single column on tablet and below */
@media screen and (max-width: 768px) {
footer .content-wrapper {
grid-template-columns: 1fr !important;
gap: 32px;
padding: 40px 24px;
text-align: center;
}
}The grid-template-columns: 1fr on mobile forces every column to take the full width of the footer, stacking them vertically. The text-align: center is optional but usually looks better on mobile since the narrow viewport makes left-aligned footer text look unbalanced.
Fixing Text Overflow
Horizontal scroll on mobile is almost always caused by an element that refuses to shrink below its content width. For footers, this is typically a long text string in a container with a minimum width set, or padding that pushes the content past the viewport edge.
/* Prevent all footer text overflow */
footer, footer * {
max-width: 100%;
box-sizing: border-box;
}
footer p, footer a, footer span {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Fix footer padding on mobile */
@media screen and (max-width: 768px) {
footer .sqs-layout {
padding-left: 0 !important;
padding-right: 0 !important;
}
}The overflow-wrap: break-word forces long strings like email addresses and URLs to wrap instead of extending past the container. The box-sizing: border-boxensures padding is included in the element's width calculation so nothing exceeds 100%.
Aligning Social Icons on Mobile
Squarespace's social icon block uses its own internal layout that often conflicts with the footer's responsive behavior. The icons might center when the text is left-aligned, or they might wrap into an uneven grid on narrow screens.
/* Center social icons on mobile */
@media screen and (max-width: 768px) {
footer .sqs-svg-icon--list {
display: flex !important;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
/* Consistent icon sizing */
footer .sqs-svg-icon--wrapper {
width: 36px !important;
height: 36px !important;
}
footer .sqs-svg-icon--wrapper svg {
width: 18px !important;
height: 18px !important;
}
}The .sqs-svg-icon--list selector targets the social icon container. Using flexbox with justify-content: center and a consistent gap ensures the icons stay evenly spaced and centered regardless of how many you have.
Combining all of these fixes into one cohesive stylesheet that handles your specific footer layout takes careful selector targeting. Our footer layout generator lets you configure your column count, alignment, spacing, and mobile behavior, then outputs the complete CSS ready for Code Injection.
A broken mobile footer is one of those details that makes a site look unfinished. Visitors notice it even if they can't articulate what's wrong. These CSS fixes take your footer from a known weak point to a clean, professional element on every device.
