How to Center Align Content in Squarespace Mobile Footer (CSS)
Is your mobile footer looking a little off-center in Squarespace? Don’t worry, we’ve all been there. While Squarespace’s Fluid Engine is flexible, sometimes you need a little custom CSS to get things just right. In this tutorial, I’ll show you how to center your mobile footer with a quick CSS snippet.
Table of Contents
Watch the Video
Check out the YouTube video below 👇
Step 1: Check Your Footer Layout
First, take a look at your footer layout on both desktop and mobile. While the desktop view may be perfectly aligned, the mobile view often ends up with left-aligned content. This can be easily fixed with a small CSS adjustment.
Step 2: Access Your Custom CSS Panel
To apply the fix, head over to the backend of your Squarespace site and open the Custom CSS panel. This is where we’ll be adding the code to center your footer on mobile. To find it, log in > Website > Pages > Website Tools > Custom CSS
Step 3: Paste the Custom Code
Here’s the CSS code you’ll use to center your mobile footer:
/*CENTER MOBILE FOOTER*/
@media screen and (max-width:767px) {
footer#footer-sections * {
text-align: center !important;
}
}
This code targets all content inside the footer on screen sizes smaller than 767px wide—essentially covering mobile devices. The text-align: center !important; line ensures that everything in the footer is centered, overriding any other conflicting styles.
Step 4: Preview the Mobile View
Once you’ve pasted the code, preview your site in mobile view to ensure the changes took effect. You should now see your footer centered, creating a cleaner and more professional look for mobile users.
Conclusion
And that’s it! With just a few lines of CSS, you’ve successfully centered your Squarespace mobile footer. Feel free to check out my YouTube channel for more tips and tricks.
Need more custom tweaks for your site? Get in touch, and let’s create a website that truly reflects your brand.
Full Code
/*CENTER MOBILE FOOTER*/
@media screen and (max-width:767px) {
footer#footer-sections * {
text-align: center !important;
}
}
Hey hey, Marya here 👋🏼
I’m the creative force behind Yangu Web Studio and a top-rated web designer on Squarespace's exclusive Marketplace for experts.
I adapt my skills to diverse industries and businesses globally, of all sizes, specializing in crafting digital solutions tailored to your unique goals. If you want to discuss a potential project, you can drop me a line at marya@yanguweb.studio or vibe with me here. Alternatively, you can schedule a free 15-minute consultation call here.
