How to center text on mobile devices in Squarespace 7.1 using CSS

Pin to save for later

Centering text on mobile devices can make a significant impact on the design and readability of your Squarespace 7.1 website. Whether you're aiming for a more polished look or improving user experience, aligning your text properly ensures that it appears visually balanced and professional across all screen sizes.

In this guide, we’ll show you how to easily center text on mobile devices only, using simple CSS in Squarespace 7.1. This targeted solution helps you maintain a clean, mobile-friendly design without affecting your desktop layout. By the end, you'll have the tools to create a responsive, well-aligned website that adapts seamlessly to different screen sizes.

In this guide, we'll walk you through three options for centering text on mobile:

1. Center a single text block

2. Center text sitewide

3. Center text in the footer

Let’s get started!

OPTION 1

Center a single text block on mobile

From your Squarespace dashboard, go to:

1. Pages > Scroll down to Website Tools > Custom CSS

2. Copy & paste the CSS in the box below

//CENTER TEXT ON MOVILE

@media only screen and (max-width: 767px) {
#BLOCK-ID-HERE { 
    text-align: center; 
}}

How to replace the block ID:

Block ID’s target the specific blocks on your website.

Here is an example of a block ID: #block-2c64c469358a23b66a91

To identify block ID’s, there’s an easy to use Google Chrome extension that will magically show you Block ID’s for every section on your website with the click of a button.

Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the red block ID’s for all of the blocks on your site.

Click on the red sticker associated with the text block you’d like to center on mobile, and the block ID will automatically be copied to your clipboard.

3. Update #BLOCK-ID-HERE with the block ID copied to your clipboard

4. Save!

---

OPTION 2

Center text sitewide on mobile

From your Squarespace dashboard, go to:

1. Pages > Scroll down to Website Tools > Custom CSS

2. Copy & paste the CSS in the box below

3. Save!

//CENTER TEXT SITEWIDE ON MOBILE

@media only screen and (max-width: 767px) {
h1, h2, h3, h4, p, { 
   text-align: center !important;
  }}

---

OPTION 3

Center text in footer on mobile

From your Squarespace dashboard, go to:

1. Pages > Scroll down to Website Tools > Custom CSS

2. Copy & paste the CSS in the box below

3. Save!

//CENTER FOOTER TEXT ON MOBILE

@media screen and (max-width:767px) {
footer#footer-sections * {
    text-align: center !important;
}
}

---

All set!

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!

More Squarespace tutorials