How to Change the Layout of Mobile View on Squarespace (Simple CSS)

Working on client websites often presents unique challenges, especially when it comes to optimizing layouts for mobile devices. In this tutorial, I'll show you a straightforward method to adjust text alignment specifically for mobile views using simple CSS tricks on Squarespace. Whether you're a beginner or an advanced user, this guide will help you enhance your website's responsiveness with minimal effort.

Watch the Video

Check out the YouTube video below 👇

The Problem: Text Alignment on Mobile Devices

While working with a client's website, I encountered an issue where the text was left-aligned on desktop view, which looked disorganized on mobile devices. The goal was to have this text center-aligned on mobile without disrupting the desktop layout.

The Solution: Duplicating Sections and Applying Custom CSS

Step 1: Duplicate the Section

The first step is straightforward. You'll need to duplicate the section of your website where the text appears. This means you will have two identical sections.

Step 2: Configure Mobile View

Switch to the mobile view on Squarespace to see how both sections currently appear. By default, they might align in a way that does not meet your needs.

Step 3: Implement Custom CSS

Here's where the magic happens. You'll apply custom CSS to control the visibility of each section based on the device's screen size. The CSS code will look something like this:

@media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}}

@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

Replace #desktop-section-id and #mobile-section-id with the actual IDs of your sections.

For the section visible on mobile devices, adjust the alignment as desired.

With these simple steps, you can effectively manage how different elements of your Squarespace website are displayed across various devices. This method not only ensures that your site looks great on desktops but also provides a tailored experience on mobile devices.

Implementing responsive design techniques like this one can significantly enhance user experience and accessibility, making your website more appealing to visitors regardless of how they access it.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call