Jump to content

Promotional Pop-Up Image on Mobile

Recommended Posts

Hello - I am trying to use the Promotional Pop-Up feature to show a jpg image when a user comes to the site.

The image is vertical, so in order to get the entire image to show, I went into the content section and entered spaces and paragraph breaks. That workaround works perfectly for it showing on desktop. However, on the mobile version, the pop up is a white block and at the bottom of the page.

I'd like the image to pop up and show by itself on mobile without the content. Is this possible?

I appreciate any insight and help.

BR Desktop.png

BR Mobile.jpeg

Link to comment
  • Replies 7
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Website > Website Tools (under Not Linked) > Custom CSS

/* Promotional popup mobile */
@media screen and (max-width: 767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: transparent;
}

.sqs-slice-group.group-copy.copy-layer-background * {
    color: white !important
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: transparent !important;
}

.sqs-slice-group.group-copy.copy-layer-background * {
    color: white !important
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: flex !important
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/3/2023 at 1:49 AM, tuanphan said:

Try adding to Website > Website Tools (under Not Linked) > Custom CSS

/* Promotional popup mobile */
@media screen and (max-width: 767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: transparent;
}

.sqs-slice-group.group-copy.copy-layer-background * {
    color: white !important
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {
    background: transparent !important;
}

.sqs-slice-group.group-copy.copy-layer-background * {
    color: white !important
}

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: flex !important
}
}

 

This helps so much - thank you! The issue now is that on mobile, the top of the pop up comes up about mid-screen and does not show the entire image. Is there a way to fix that?

Screenshot 2023-11-06 at 10.43.28 AM.jpeg

Link to comment
On 11/6/2023 at 11:45 PM, socialstylate said:

This helps so much - thank you! The issue now is that on mobile, the top of the pop up comes up about mid-screen and does not show the entire image. Is there a way to fix that?

Screenshot 2023-11-06 at 10.43.28 AM.jpeg

Can you share your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

@tuanphan Hi ! I am so grateful I found this thread. I used the code you provided and the image appeared on mobile. Pure magic. THANK YOU. Do you have any recommendations on how to ensure there is proper spacing between the logo and buttons? See attached image. Right now everything looks smushed on mobile. Is there a code snippet I can add so the email address box shimmys down? Thanks!

Newsletter pop up form dk & mobile.jpg

Link to comment
On 2/6/2024 at 3:45 AM, saschaberenblatt said:

@tuanphan Hi ! I am so grateful I found this thread. I used the code you provided and the image appeared on mobile. Pure magic. THANK YOU. Do you have any recommendations on how to ensure there is proper spacing between the logo and buttons? See attached image. Right now everything looks smushed on mobile. Is there a code snippet I can add so the email address box shimmys down? Thanks!

Newsletter pop up form dk & mobile.jpg

Can you share site url? I can check your case easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.