Jump to content

Custom Mobile Pop Up

Recommended Posts

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? 

Link to comment

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

 

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
  • 9 months later...
  • 2 weeks later...
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?

image.thumb.png.03f39912afba5aee0e260d2e07f4ef92.png

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
  • 8 months later...
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. 

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

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
  • 7 months later...

@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: 

image.png.b8d999f68b3c952f44d02e505b39c723.png

 

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

image.thumb.png.fef52d19b0f6f1f6f01dc4f252701f1b.pngimage.thumb.png.fef52d19b0f6f1f6f01dc4f252701f1b.png

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

 

Edited by tuanphan
X disappear

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
  • 3 months later...

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.