promotional pop-up (mobile) position problem

Site URL: https://www.grapesodastudio.uk/

hello almighty and gracious squaremind, 

having an issue with a promotional popup on mobile where the pop-up appears without it's background image and unusually low on the phone screen. 

Images should show the desktop and mobile emulated (it does exactly the same thing on actual phones) situations

Have tried using in the custom CSS

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy {

    background: url("IMAGE URL");

}
to force the image in (code snippet stolen from another pop up post) - but to no avail 

I've tried targeting various classes of .sqs-slide-wrapper to try and force the position to be at the top but can only make it behave by turning things off in dev tools in chrome 

If i turn off .sqs-popup-overlay - top:auto i can then use the dev tools to make it lookright but then can't work out how to make the same thing happen by adding css to the custom css

Has anyone got a suggestion of how to make the bleeping thing behave as it should? 

Thanks

4 minutes ago, paul2009 said:

This is by design.

The mobile version of the popup has been deliberately designed this way so that it respect Google’s guidelines for pop-ups on mobiles and does not obscure the content underneath.

This is really important because Google predominantly uses the mobile version of the content for indexing and ranking. If your popup does not respect Google’s guidelines your site is likely to be penalised in search rankings.

 thanks very much for your reply, that makes sense

Is the indexing effected by how much of the content the pop up covers? can live with the pop up being at the bottom but having the button at the bottom of the  pop-up not always appearing in the screen is less ideal.

Is the lack of background image also due to the indexing/ranking concession? 

The size is most important. Having an image wouldn't matter, except that it would lead to users wanting it larger 😀.

On my mobile popup (omventure.com), the text fits within the popup space visible at the bottom of the screen, but there is a popup scroll bar that, when used, just reveals a lot of blank space below the button.  How do I remove all that blank space below the button on the mobile popup, so there is no scroll bar on the mobile popup?  I've attached an image showing what it looks like after I scroll to the bottom of the pop up (all the blank space)  Thank you for any possible help!  XO

On 12/9/2022 at 12:34 AM, omventure said:

On my mobile popup (omventure.com), the text fits within the popup space visible at the bottom of the screen, but there is a popup scroll bar that, when used, just reveals a lot of blank space below the button.  How do I remove all that blank space below the button on the mobile popup, so there is no scroll bar on the mobile popup?  I've attached an image showing what it looks like after I scroll to the bottom of the pop up (all the blank space)  Thank you for any possible help!  XO

Popup shows fine to me. Did you solve it?

Yes, I did solve it!  Once I added a border (and made it the same color, so it would blend in, as I didn't want a border), the problem was resolved.  So it's a Squarespace issue that I worked around.  Thank you!

But I have another issue:  my mobile pop up close button does not display in the color I've selected ... is there CSS code that will ensure my mobile pop up close button will display in a custom color?  Thank you!

On 1/14/2023 at 8:50 AM, omventure said:

Yes, I did solve it!  Once I added a border (and made it the same color, so it would blend in, as I didn't want a border), the problem was resolved.  So it's a Squarespace issue that I worked around.  Thank you!

But I have another issue:  my mobile pop up close button does not display in the color I've selected ... is there CSS code that will ensure my mobile pop up close button will display in a custom color?  Thank you!

 

Can you enable popup? It doesn't show now

I have just reset it to appear at 30 seconds (to create a more peaceful experience, sorry!).

I'm having another issue, now, though, which is interesting:

On mobile, I'm trying to make my popup close X button appear white PLUS appear on the bottom right of the popup window.

I can't seem to figure out how to do this.  Here is my best attempt, but it's not working:

/* pop-up close button */
@media screen and (max-width: 640px) {
.sqs-popup-overlay-close {
color: #fff !important;
margin-right: 5px !important;
margin-bottom: 45px !important;
}
}

Thank you for any possible help!

Hi all,

Hope you are all well,

Does anyone know how to get images on a promotional pop-up for mobile in 7.1? 

Thanks in advance  

On 2/15/2023 at 10:44 PM, hellothere said:

Hi all,

Hope you are all well,

Does anyone know how to get images on a promotional pop-up for mobile in 7.1? 

Thanks in advance  

Add this code to Design > Custom CSS to get image show on mobile

/* 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 1/18/2023 at 9:58 AM, omventure said:

I'm having another issue, now, though, which is interesting:

On mobile, I'm trying to make my popup close X button appear white PLUS appear on the bottom right of the popup window.

I can't seem to figure out how to do this.  Here is my best attempt, but it's not working:

/* pop-up close button */
@media screen and (max-width: 640px) {
.sqs-popup-overlay-close {
color: #fff !important;
margin-right: 5px !important;
margin-bottom: 45px !important;
}
}

Thank you for any possible help!

@omventure were you able to solve this? We are having the same issue of trying to color the close button "X" on mobile. 

Yes, I was able to color the close button on mobile pop up:

/* popup close X */
.sqs-popup-overlay-close {
color: #fff !important;
}

/* popup close X mobile */
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close:before {
color: #fff !important;
}

Thank you very much! I greatly appreciate you sharing this. Now on to solve the autogenerated box around it...

Anytime!

I fixed that auto-generated box/border around it by...

going into marketing, promo pop-up, style, overlay design, border color (and made that border color identical to the color behind text)

Nice! This didn't work out for me. But it got me looking at the individual elements, and I was able to change the opacity to "0" by editing the CSS you shared. Much appreciated!

Thank you so much for letting me know both of those things!

I noticed weird things happening with css yesterday, so I wonder if some system changes are going on.

I'm going to take a peek at what you did for your site and compare to my settings, as I'm so curious about it.

Thanks again!