Promotional Pop-Up Image on Mobile

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.

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

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?

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?

Can you share your site url?

@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!

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!

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

Hi ! I didn't get a notification of your reply. Apologies for the delay. I am still trying to figure this out. Here is the site URL. Please let me know of any suggestions.

https://www.naimagreen.com/

Thank you!

Sascha

Use this CSS code

@media screen and (max-width:767px) {
.sqs-slice-group.group-copy.copy-layer-background .newsletter-form .form-item {
    margin-top: 40px;
    margin-bottom: 20px;
}
}