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

hello i would like to add a pop-up to a specific page on my website - 
I would like for it to be like an iphone reminder (which i have already created).
how can i best do this?? 

https://www.nadejnarodina.com/

On 6/4/2024 at 3:39 PM, katarinabagic said:

hello i would like to add a pop-up to a specific page on my website - 
I would like for it to be like an iphone reminder (which i have already created).
how can i best do this?? 

https://www.nadejnarodina.com/

You can send desired layout, I can code a simple popup for you.

okay i would like it the way i have it now on the home page... i want to make sure the whole photo is showing ( so it doesnt get cut off) 

and i would like to to show on the mobile version as well WITH THE PHOTO. 

oh lastly also i would like it in two languages (english and slovak) .... is that possible ??

*while i am on the topic of multiple languaegs.... i am having a hard time finding the photo URL to translate some graphs with Weglot. can you also maybe assist me with that?