Jump to content

promotional pop-up (mobile) position problem

Go to solution Solved by paul2009,

Recommended Posts

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

 

Screenshot 2021-11-04 at 19.50.52.png

Screenshot 2021-11-04 at 19.51.03.png

Link to comment
  • Solution
On 11/4/2021 at 7:57 PM, pearknuckle said:

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. 

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.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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? 

Link to comment

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

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 year later...

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

Screenshot_20221208-103209.png

Link to comment
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

Screenshot_20221208-103209.png

Popup shows fine to me. Did you solve it?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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!

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

 

 

 

Link to comment
  • 4 weeks later...
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
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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. 

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.