If you change the alignment of text on the mobile version of your Squarespace website, it will annoyingly change it on the desktop version too.

So if you want to center align your text on the mobile version of your Squarespace website only, you’ll need to add this custom code to your website.

Watch the video

Check out the YouTube video below 👇

Once you’ve added your text and center aligned it on the mobile version of your website (and by default therefore the desktop version too) head to Website > Website Tools > Custom CSS and add the following code to your custom CSS box:

h1, h2, h3, h4, p {

text-align: center !important;

}

You need to ensure the code is wrapped in your mobile target codes in order to ensure you’re targeting the mobile version of your website like this:

@media screen and (max-width: 700px) {

h1, h2, h3, h4, p {

text-align: center !important;

}

}

To target specific pieces of text, e.g. just the text in a certain section or block, use the Squarespace Block ID Finder plugin to get the ID for the relevant block or section and wrap your code in this ID (like the example below).

@media screen and (max-width: 700px) {

section[ID-HERE] {

h1, h2, h3, h4, p {

text-align: center !important;

}

}

}

📩 Join the inner circle to get exclusive code updates

Once you’re happy, hit save and you’re all done! With just some simple custom code, you can center align your text on the mobile version of your Squarespace website only.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?