How to apply code to mobile only on Squarespace

It’s all well and good me showing you what you can achieve with custom code on Squarespace, but if you don’t know how to actually add it to your website then it’s all a bit useless. 

I’ve talked you through how to add custom CSS on Squarespace before, but what if you want to add your custom code to mobile only? Keep reading to find out how you can add custom code to JUST the mobile version of your website…

Watch the video

Check out the YouTube video below 👇

How to apply code to mobile only on Squarespace 

From your main dashboard head to Design and select Custom CSS. The panel that appears is where you add your custom code. But how do you ensure that the code you add only applies to the mobile version of your Squarespace website?

By adding the following before every piece of code you want to apply to mobile only. This is what you’ll need:

@media screen and (max-width: 640px) {

}

What this does is tell Squarespace that the code that comes next, in the { }, is to be applied to screens up to a size of 640 px, aka roughly the maximum size of mobile devices. Anything bigger and the code won’t be applied. 

You’ll need to wrap any piece of code that you want to apply to mobile only with the above. Anything not wrapped in the code will appear on desktop and mobile (unless you set it to appear on desktop only of course).

---

📩 Join the inner circle to get exclusive code updates

---

Being able to apply code to the mobile version of your website only is super useful when it comes to ensuring that your Squarespace site is mobile friendly and offering a great user experience for mobile visitors, without sacrificing the design and functionality of your desktop website. 

If you found this useful, be sure to head over to the by Crawford YouTube channel for tonnes more Squarespace resources and tutorials.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?