How To Center Align Text Mobile View Squarespace
In this blog tutorial, learn how to center align text exclusively for the mobile view in Squarespace while different on the desktop view.
Let’s dive in..
Watch the video
Check out the YouTube video below 👇
So what I want to do is change the first text block inside the red box to be center-aligned on mobile view.
In order to do that, we need to add some code. This is because if we try to change the alignment to center on mobile, it will also affect the web view. But in this instance, we want it to be center-aligned on mobile and left-aligned on the web.
So, first, paste this code into the Custom CSS window:
@media only screen and (max-width:767px) {
#YOUR_BLOCK_ID_HERE {
text-align:center;
}
}
As you can see from the code, we need to replace YOUR_BLOCK_ID_HERE with the ID of the text block we want to make center-aligned. I highly recommend using the Squarespace ID Finder Chrome extension to do this. It can be downloaded here: Squarespace ID Finder Chrome Extension.
After you download it, click the extension, and you'll see all the IDs showing up. We're interested in the first block ID, which will be marked in red. Copy and paste that, then replace YOUR_BLOCK_ID_HERE with the block ID from the ID Finder app. This will make the text block center-aligned on mobile.
PRO TIP: If you also want, for example, the block underneath to be center-aligned, instead of adding the entire code segment again, just add a comma (,) after your block ID and include the new block ID like this:
#block_id_1, #block_id_2 { text-align: center; }
This way, both block IDs will be included in the same code, and both will be center-aligned on mobile.
The image shows that the text remains left-aligned on the web version while being centered on the mobile version.
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
