Custom Mobile Pop Up

Site URL: https://www.shopmaisaguam.com/

A few questions:

1) First, can anyone please visit my site on both mobile and desktop to see if pop ups are enabled? They are enabled on my end but when I refresh pages on my iPhone and MacBook they don't show... 

2) Is there any way to add an image to the background of a mobile pop-up? I have this feature for the desktop version but for mobile visitors its just green with white text.

3) Is there any way for the mobile popup to mimic the placement of the desktop pop up i.e. popping up in the center of the page and not at the bottom? 

I don't see any popup. Windows/Chrome/Dell Laptop

Weird. It only seems to show when I go into Marketing -> Promotional Pop-Up

Any other bug you think may be causing it not to show? 

ah okay, I see now.

Q2. background image. Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-slice-gallery-item.content-fill {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.sqs-slice-gallery-item.content-fill img {
    visibility: hidden;
}
}

Q3.

@media screen and (max-width:640px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide {
    top: 50% !important;
    transform: translateY(-50%);
    bottom: unset;
}
}

I'm having the exact same two issues with this website: https://www.melwiggins.com/

On 3/9/2021 at 12:42 AM, calibratedconcepts said:

I'm having the exact same two issues with this website: https://www.melwiggins.com/

Hi. Have you tried above code yet?

Also, on tablet, header sticky is white background. Do you want to change logo color or header color?

I had tried it! But I emailed you and you got me sorted out.

On 5/28/2020 at 4:29 AM, tuanphan said:

ah okay, I see now.

Q2. background image. Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-slice-gallery-item.content-fill {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.sqs-slice-gallery-item.content-fill img {
    visibility: hidden;
}
}

Q3.

@media screen and (max-width:640px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide {
    top: 50% !important;
    transform: translateY(-50%);
    bottom: unset;
}
}

 

Tuan I'm looking for code to make the mobile pop up be full screen. I find it visually confusing with it just being on the bottom. 

3 hours ago, jaisequoia said:

I'm looking for code to make the mobile pop up be full screen.

See my post below. In summary, this is by design because it is important that it is small on mobile:

I tried the code above (even the sample code) it's not working 😞

@tuanphan here is the site: https://www.bobabam.com/

The background image has text on it (not live text) so the only thing we need is the email subscription box and button. 

How it looks currently on Desktop: 

How it's looking on mobile: Even with this code (from above replacing the image with ours of course) 

@media screen and (max-width:640px) {
.sqs-slice-gallery-item.content-fill {
    background-image: url(https://static1.squarespace.com/static/61e1b6342a00526cfd710af8/t/62be1d54dce37607bf14910d/1656626516684/Email+Pop+Up.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.sqs-slice-gallery-item.content-fill img {
    visibility: hidden;
}
}

On 7/1/2022 at 5:06 AM, skcmarketing said:

I tried the code above (even the sample code) it's not working 😞

Try this code

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    top: 0 !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-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-animation-ready .sqs-popup-overlay-close {
    z-index: 999999999;
}
}

Updated new code. To fix X close icon disappear

On 10/12/2022 at 10:36 PM, tuanphan said:

Updated new code. To fix X close icon disappear

 

On 7/1/2022 at 9:16 PM, tuanphan said:

Try this code

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    top: 0 !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-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-animation-ready .sqs-popup-overlay-close {
    z-index: 999999999;
}
}

 

Where is this code do I put my image url that I want to display on the pop up?

On 10/3/2023 at 1:36 AM, alisonny said:

 

Where is this code do I put my image url that I want to display on the pop up?

This code will enable Desktop Image url on Mobile. If you want to use custom image on mobile only, let me know site url, I will give new code

Hey! I want to make my promo pop up on mobile to be central to the page just like the desktop version. Is there a code for this? Thanks!

On 3/15/2024 at 2:24 AM, BecciMS said:

Hey! I want to make my promo pop up on mobile to be central to the page just like the desktop version. Is there a code for this? Thanks!

If you share link to site, we can check code easier