How to centre your footer text on mobile in Squarespace 7.1

Mobile responsiveness is essential in modern web design, and while Squarespace 7.1 handles most mobile adjustments automatically, there are times when specific elements—like your footer text—don’t display quite how you’d like.

In this quick tutorial, you’ll learn how to centre-align your footer text on mobile devices using a simple CSS snippet. This ensures your footer looks clean, balanced, and professional across all screen sizes.

Table of Contents

• Why Centre the Footer Text on Mobile

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Centre the Footer Text on Mobile?

By default, Squarespace may left-align your footer text on mobile, even if it looks centred on desktop. You may want to centre it to:

• Improve visual balance

• Enhance readability on smaller screens

• Create a more cohesive layout

Complexity: Easy

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and add appropriate code into the Custom CSS editor box.

@media only screen and (max-width:640px){
 #footer-sections * {
    text-align:center
 }
}

The ‘*’ selector within the css code allows for the setting of a style for all the elements of a HTML page or for all the elements within an element of a HTML page.

---

Key Takeaways

• Use media queries to target mobile devices specifically.

• Always use #footer-sections as your main class to ensure you're targeting the correct area.

• !important may be necessary to override built-in Squarespace styles.

• This method works for paragraphs, headings, and HTML blocks within the footer

FAQs

Will this change how the footer looks on desktop?
No, the CSS is wrapped in a media query targeting mobile screens only (max-width: 767px), so desktop layouts remain unchanged.

What if my footer uses columns or blocks?
This CSS still works, but you may need additional tweaks. Let me know your layout for a more specific solution.

---

---

Conclusion

Mobile optimisation doesn’t have to be complicated. With a few lines of custom CSS, you can create a cleaner, more polished mobile footer experience for your Squarespace 7.1 website.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.