How to create a custom layout for mobile in Squarespace 7.1

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

As much as I love Squarespace, sometimes the settings available for mobile are… well, lacking.

I used to spend HOURS creating custom code to do mobile specific things, like swapping out backgrounds, specific images, resizing fonts and more just to make it look a little bit better.

But thanks to page sections in 7.1, that process has gotten a whole lot easier! 🎉

This is one of the simplest ways to create a mobile layout in Squarespace!

In this tutorial, you’ll see how two lines of code can create a super customized look specifically for mobile. 

Here is the code from this tutorial; be sure to change the data section id!

@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}}