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

Hi there, I would like to have the pop up appear centered on mobile with image. Here is the link. The code you posted before had it full width and positioned at the top of the page.

https://www.laserenavillas.com/

On 5/5/2024 at 5:44 AM, kimmydesign said:

Hi there, I would like to have the pop up appear centered on mobile with image. Here is the link. The code you posted before had it full width and positioned at the top of the page.

 

https://www.laserenavillas.com/

Rename

top

to

bottom

Now it's pinned to the bottom. How do I make it centered?

Also can I made it fade in instead of just pop up? It's really jarring right now. 

On 5/7/2024 at 11:08 PM, kimmydesign said:

Now it's pinned to the bottom. How do I make it centered?

Use this code

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
}
.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;
}
}

On 5/8/2024 at 6:55 AM, kimmydesign said:

Also can I made it fade in instead of just pop up? It's really jarring right now. 

I don't know this

@tuanphan, I've tried many combinations of all of the above code, but still nothing is working to give me a full-screen mobile version of my promo pop-up. I can get the full page image, but the intro text and submission form doesn't show up. This is the page I'm directing people to: https://www.mxdinteriors.com/sunbelt-gold-method  I would love you help in getting the mobile view into parody with the desktop view.

Thanks!

On 7/1/2024 at 11:06 AM, mxdinteriors said:

@tuanphan, I've tried many combinations of all of the above code, but still nothing is working to give me a full-screen mobile version of my promo pop-up. I can get the full page image, but the intro text and submission form doesn't show up. This is the page I'm directing people to: https://www.mxdinteriors.com/sunbelt-gold-method  I would love you help in getting the mobile view into parody with the desktop view.

Thanks!

Use 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-popup-overlay-content .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] [data-slice-type="gallery"] {
    display: block !important;
    width: 100% !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;
}
}