How to create a custom mobile layout in Squarespace

Oct 25

Squarespace's mobile customization options can feel a bit... limited. Yes, we can rearrange & resize content blocks, but that’s about it.

What if I told you there's a super simple way to create mobile-specific sections using Squarespace 7.1 and just two lines of code? It’s possible, and this tutorial will teach you how!

Instead of struggling with complicated code to adjust fonts, swap images, or change backgrounds, you can create two separate sections - one perfectly designed for desktop, and another specifically crafted for mobile. When someone visits your site, they'll automatically see the version that's best for their device!

Ready to learn this game-changing Squarespace trick? Check out the video below & keep reading to learn the step by step process.

Step One: Create your two page sections

You’ll want to have one designed for desktop and large tablets, and then a completely different one for mobile devices. These need to be separate page sections for this to work.

Step Two: Find the data section ID

Every page section in a Squarespace site has a unique ID number. You need to find the unique data section ID for your desktop section and your mobile section. You can use the free Chrome extension from Will Myers, available here: insidethesquare.co/chromeext

Step Three: Update this code

Update the placeholder text in the code below to match your data section ID. The first number is for the mobile section, the second is for the desktop section.

@media only screen and(min-width:641px) {
[mobile-data-section-id="123456"]{display:none}
}
@media only screen and (max-width:640px) {
[desktop-data-section-id="654321"]{display:none}
}

Step Four: Add this code to Squarespace

You can add this to your site wide CSS by navigating to pages > website tools > custom css. Paste the entire code here. Your page section ID’s are unique so this code wont change anything else about your Squarespace website!

button