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
4 minutes ago, 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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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 😀.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.