Center Align Text on Mobile Squarespace
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 👇
Want a framework for designing the perfect homepage?
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;
}
}
}
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
