A Guide To Aligning Text On Your Mobile Squarespace Site

Squarespace does not allow you to have your desktop and mobile websites have different alignments on your text blocks. But I have found a way around this using a simple piece of CSS and a trusty plugin to make the process even easier (download Squarespace ID Finder here). Let’s jump straight into it.

Step 1: Find The BLock ID

You need to firstly find your block ID by either:

• Right-click, inspect: Scroll through all of the code on the right side of your browser to find the ID.

• OR this plugin (easy method): Download the free Squarespace ID Finder for free.

Step 2: Add The Code

1. In the Squarespace website editor navigate to Custom CSS:

   • Click on the search bar in the editor

   • Type Custom CSS

2. Add the following code to the CSS section:

@media only screen and (max-width: 767px) {
    #YOUR-TEXT-BLOCK-ID {
        text-align: center; /* Change to left, right, or center */
    }
}

1. Change #YOUR-TEXT-BLOCK-ID with your own block ID.

2. Change “center” to “left” or “right” (or keep it the same depending).

3. Save.

Step 3: Test and Adjust

• Ensure everything is working properly on both the desktop and mobile views.

• If anything doesn't quite work, check back through the code and ensure it matches what I have told you.

Final Notes

This method is a very simple solution to a big problem many Squarespace designers and business owners encounter when trying to optimize their Squarespace website for mobile users.

If you have any questions feel free to message me on WhatsApp or check out my YouTube channel.

If you would like to make use of my services as a Squarespace website designer, book a call here.

Thanks for reading.