How to create a custom layout for mobile in Squarespace // Custom Mobile Squarespace Site Layout

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!
---
📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign
---
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 a link to the Chrome extension I used in the video to grab the data section id. I am not affiliated with them in any way, just a fan: https://chrome.google.com/webstore/de...

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

Do you want to do this with more than one section? You can add multiple data section id;s before the “display none” part of the code, separating them with a comma. Learn more about the symbols used in CSS at https://insidethesquare.co/resources/...

- - -
🔗 RELATED VIDEOS 🔗
How To Customize Your Squarespace Product Page on Mobile:    • How To Customize Your Squarespace Pro...  

How to resize images for mobile in Squarespace:    • How to resize images for mobile in Sq...  

How to Create Equal Width Buttons in Squarespace:    • How to Create Equal Width Buttons in ...  

How to use a custom font for the mobile menu in Squarespace 7.1: https://insidethesquare.co/squarespac...

Show The Squarespace Mobile Menu on Desktop: https://insidethesquare.co/squarespac...
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- - -
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
---
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
---
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥