How to Show the Squarespace Promotional Pop-up Image on Mobile

You've probably noticed that when you have a promotional pop-up on your Squarespace website, it looks really beautiful on desktop, but then when you go to the mobile view, there's no image.

Now Squarespace probably did that on purpose so that it might be easier for people to read your pop-up on mobile, but you may have other ideas.

So I'm going to show you how to get your Squarespace promotional pop-up image to show up on mobile devices.

Choose Any Layout You Want for Your Promotional Pop-Up

You can choose any layout you want and it's going to look the same on mobile.

To add an image to your promotional pop-up, you just scroll down to where it says “Image” in the promotional pop-up menu and upload an image.

This is How You Show the Squarespace Promotional Pop-up Image on Mobile

To get your image showing up in your pop-up on mobile, do this:

1. Go to pages > Website tools > Custom CSS

2. Copy and paste the code below (scroll down for the code ↓) right here

3. Select save
   

Now, if you want to see what this looks like, you'll go back to Website tools > Promotional pop-up and select mobile view.

And You may decide to change the layout just to make sure that it looks okay.

Another thing you can do if you want your promotional pop-up to show up at the top of the page on mobile is add a little more custom CSS to your code.

Watch me do this in the YouTube video above.

Here’s the Code You Paste Into Custom CSS

It doesn’t all show up on your screen probably, but just start highlighting and watch the magic happen.

If you have trouble, head on over to the YouTube video for the code.

/* Show promotional pop-up image on mobile */

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    opacity: 1 !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: block !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    z-index: 1000 !important;
}
 .sqs-slice-group.group-copy.copy-layer-background {
    z-index: 99999999;
    background-color: transparent !important;
}
a.sqs-popup-overlay-close {
    z-index: 9999999 !important;
}
}

I Can’t Take Credit for This Code

And I can't take credit for this handy-dandy custom CSS. This guy over here deserves all the credit. His name is Tuan Phan and he's a genius. Buy him a coffee.

Example 1

Example 2

Example 3

Was this helpful?

Are you going to try this? Have you been wanting this but didn’t know how to do it? Share your thought below 👇

---

If you liked this post, you’ll LOVE these:​​

• How to Add a Second Button to Navigation in Squarespace

• How to Make a Summary Block Auto-Scroll in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

• How to Hide the Hamburger Menu on Mobile in Squarespace

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇