How to Center Text & Buttons on Mobile in Squarespace

Squarespace

Apr 30

Generally left-aligned text is the better option for user experience on a website as we’re used to reading left to right.

Why?

Well having a consistent starting point for each line means we don’t have to work so hard to read the text leaving us more space to process what it’s actually saying.

However sometimes on mobile center aligned text just… looks better. Especially in your footer!

The same can be true of buttons, in that they look best left aligned (especially when the text above them is) … but on mobile, there’s an issue…

Know what it is?

Your thumbs!! The majority of us are right handed (sorry lefties!) and having left aligned buttons, with the large mobile phones of today can make them tricky to click! So center aligned buttons on mobile are better for your user experience (UX)

Why center text and buttons on Mobile?

As I laid out above - for both aesthetic and UX reasons it’s useful to be able to center text and button alignment on mobile. Add these code snippets to the CSS panel via the Design section of your site to be able to change the alignment of buttons and text on mobile whilst leaving it left aligned on desktop!

CSS to Center Text on Mobile

///CENTER PARAGRAPH TEXT MOBILE///

@media only screen and (max-width: 767px) { 
p {
text-align: center !important
}
}

Customise text alignment on mobile

You can apply this code to headers too by adding h1, h2, h3 and/ or h4 next to the p and separating them with commas. If you wanted it to apply to all text for example the code snippet would be.

///CENTER HEADER & PARAGRAPH TEXT MOBILE///

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

Center buttons on mobile

Add this CSS snippet to the CSS panel in the design section of your site.

CSS to Center Text on Mobile

///BUTTONS CENTERED MOBILE///

@media only screen and (max-width:767px) {
.sqs-block-button * {
    text-align: center !important;
}
}

Update!

Squarespace’s new editor Fluid Engine gives you some more flexibility in styling on mobile & desktop, but I’m still using classic editor for at least some sections & these code snippets are still in more than regular use round these parts!!

Less of a DIYer and want someone to do it for you?

You can grab a power hour with me to center the text and buttons on your site and solve your other Squarespace niggles…

find out more about power hours

Featured