How to hide a Squarespace pop-up on desktop only
There are a variety of reasons why you may want to add a pop-up to your Squarespace website from encouraging people to subscribe to your newsletter to showcasing your latest launch.
You may find however that you don’t always want your pop-up to display. I’ve taken you through the process of removing your pop-up from the mobile version of your Squarespace website before and it’s a super simple process.
Doing the opposite however is a little tricker. If you want to remove your Squarespace pop-up from your desktop site, whilst keeping it live on the mobile version, you’ll need to use some code.
Keep reading to find out more…
Watch the video
Check out the YouTube video below 👇
How to hide a Squarespace pop-up on desktop only
You first need to ensure that the promotion pop-up is toggled on within your marketing dashboard. Here you’ll also have the option to turn on mobile display. However there’s no option to turn off desktop.
Instead for this you’ll need to navigate to your custom CSS panel and add in the following code:
@media screen and (min-width: 641px) {
.sqs-popup-overlay {
display: none !important;
}
}
This code is telling Squarespace that you’re targeting all screen sizes bigger than the largest possible mobile display e.g. desktops.
Within the code you’ll also need to add your target aka the part of your website you want the code to target, in this case your pop-up.
📩 Join the inner circle to get exclusive code updates
In order to get this target open an incognito browser and navigate to your website. Once the pop-up has appeared head to your Google Chrome Developer Tools and copy and paste the pop-up target. When getting this, ensure you’re getting the whole pop-up background, not just the pop-up text.
Paste this into your code and hit save. This will remove your pop-up from desktop only, ensuring it still appears for mobile users.
If you found this article useful be sure to share it online and check out the rest of my Squarespace resources.
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.