Promo Popup: Image background not showing on mobile

Site URL: http://shopmaisaguam.com

Hi,

I'm trying to create a promo pop up but for some reason the image that shows on the web version disappears on the mobile version. Any code for this? See attached images. 

I am not seeing the popup at all on your page. Is it still active?

3 minutes ago, rwp said:

I am not seeing the popup at all on your page. Is it still active?

I disabled it until I can figure it out... 

If you can set it back up, I will check it out.

3 minutes ago, rwp said:

If you can set it back up, I will check it out.

Just enabled it... give it a few mins. Let me know if you still dont see it. 

.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");
}

4 minutes ago, rwp said:

.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");
}

 

Where do I input this? And I how do I get image URL link for photo? 

To add CSS, go to Design -> Custom CSS

I can get you the url, but the pop up needs to be active on your page, and its turned off again.

3 minutes ago, rwp said:

To add CSS, go to Design -> Custom CSS

I can get you the url, but the pop up needs to be active on your page, and its turned off again.

I thought of another option: adding the image to the gallery slider at the top of the homepage instead of the popup. What do you think? Looks fine on desktop though but not on mobile. 

I ran across the same issue and tried to inject the code that you put in with a URL I created on IMGUR and was having some trouble still 

my site url is https://www.rockwoodsessions.com/

On 10/22/2021 at 6:20 AM, Rockwood-Sessions said:

my site url is https://www.rockwoodsessions.com/

Can you enable popup?

I am having the same issue, unsure of where/how to input any code to get the image to show up on Mobile .

https://www.firecrustpizzeria.com/ 

On 4/19/2022 at 1:09 AM, firecrustpizzeria said:

I am having the same issue, unsure of where/how to input any code to get the image to show up on Mobile .

https://www.firecrustpizzeria.com/ 

Try adding to Design > Custom CSS

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

On 4/22/2022 at 3:48 PM, tuanphan said:

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

Hi @tuanphan I'm using the above code - it works to show the image in the mobile promo popup, but now the content (where all the copy is on the right hand side) is cut off, half of it now sits behind the image??

https://jeanine-thompson.squarespace.com/ password: tuansqsp

On 5/4/2022 at 7:17 PM, Iwan said:

Hi @tuanphan I'm using the above code - it works to show the image in the mobile promo popup, but now the content (where all the copy is on the right hand side) is cut off, half of it now sits behind the image??

https://jeanine-thompson.squarespace.com/ password: tuansqsp

What should it look like? Text under image, text overlap image or?

I too have a pop-up and the image is not displayed on the mobile pop-up.

All of the previous requests do not seem to have enough information for me to follow any directions.  I would love to enable to popup to have a pic on mobile.

hairdresserstrong.com

On 3/9/2023 at 8:42 AM, hatchingimagination said:

I too have a pop-up and the image is not displayed on the mobile pop-up.

All of the previous requests do not seem to have enough information for me to follow any directions.  I would love to enable to popup to have a pic on mobile.

hairdresserstrong.com

Add this to Design > Custom CSS

/* 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 3/11/2023 at 4:39 AM, tuanphan said:

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

@tuanphan I used this CSS, and it worked as described. Looking to edit it further though because we are trying to use the Popup as a lock screen for a private website since the traditional lock screen will not do what we need - which is a simple email verification for access. Too bad we can't use a custom landing page as a lock screen. Or can we?

Website: https://www.atria-advisorloans.com/
Password: ATRIAlendingPORTAL

Is there a way to...

1. Desktop & Mobile: Disable the click around? We're using the full screen for a reason, and don't want people to bypass it by simply clicking anywhere on the screen.
2. Mobile: Make the background full screen? See red section/arrow in attached image. 
3. Mobile: Hide or recolor the "x" and box? See yellow arrows in attached image.

Again, none of this would be an issue if we could lock the entire website with an email verification instead of a single shared PW. Open to other ideas here as well.

• Member Areas will NOT work because we are already embedding an app that requires login credentials, and we don't want users to have to manage a SQSP Member Profile AND an App profile. That would be silly. 
• Also, the possible option for SSO is way above my understanding, and we would need to hire someone. That's fine, but don't know where to look, or what a fair market rate would be.

Thank you for any and all of your assistance!

On 3/25/2023 at 4:39 AM, LUDLOW said:

@tuanphan I used this CSS, and it worked as described. Looking to edit it further though because we are trying to use the Popup as a lock screen for a private website since the traditional lock screen will not do what we need - which is a simple email verification for access. Too bad we can't use a custom landing page as a lock screen. Or can we?

Website: https://www.atria-advisorloans.com/
Password: ATRIAlendingPORTAL

Is there a way to...

1. Desktop & Mobile: Disable the click around? We're using the full screen for a reason, and don't want people to bypass it by simply clicking anywhere on the screen.
2. Mobile: Make the background full screen? See red section/arrow in attached image. 
3. Mobile: Hide or recolor the "x" and box? See yellow arrows in attached image.

Again, none of this would be an issue if we could lock the entire website with an email verification instead of a single shared PW. Open to other ideas here as well.

• Member Areas will NOT work because we are already embedding an app that requires login credentials, and we don't want users to have to manage a SQSP Member Profile AND an App profile. That would be silly. 
• Also, the possible option for SSO is way above my understanding, and we would need to hire someone. That's fine, but don't know where to look, or what a fair market rate would be.

Thank you for any and all of your assistance!

Sorry for delay. Do you still need help?

@tuanphan no worries! I know you're busy. Yes please, we still need help with this. 

@tuanphan I was able to solve part of this, but we still need help. By using the CSS at the bottom of this message, I was able to hide the close button "X" and the corresponding auto-populated square around it. For anyone concerned with advertising laws, this is a private site, and we're using the pop-up as a lock screen.

However, we still need assistance on the following:

Website: https://www.atria-advisorloans.com/
Password: ATRIAlendingPORTAL

Is there a way to...

1. Desktop: Disable the click around? Because it's a private site, we don't want people to bypass our modified lock screen by simply clicking anywhere on the fullscreen pop-up. Alternatively, perhaps the "X" can be designated as the only "close window" function.
2. Mobile: Make the background fullscreen? Being pinned to the bottom defeats our purposes for this pop-up. See red section/arrow in attached image. 

CSS for hiding the close X and border:

/* popup close X */
.sqs-popup-overlay-close {
opacity: 0 !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 {
opacity: 0 !important;
}

On 3/31/2023 at 9:56 PM, LUDLOW said:

@tuanphan I was able to solve part of this, but we still need help. By using the CSS at the bottom of this message, I was able to hide the close button "X" and the corresponding auto-populated square around it. For anyone concerned with advertising laws, this is a private site, and we're using the pop-up as a lock screen.

However, we still need assistance on the following:

Website: https://www.atria-advisorloans.com/
Password: ATRIAlendingPORTAL

Is there a way to...

1. Desktop: Disable the click around? Because it's a private site, we don't want people to bypass our modified lock screen by simply clicking anywhere on the fullscreen pop-up. Alternatively, perhaps the "X" can be designated as the only "close window" function.
2. Mobile: Make the background fullscreen? Being pinned to the bottom defeats our purposes for this pop-up. See red section/arrow in attached image. 

CSS for hiding the close X and border:

/* popup close X */
.sqs-popup-overlay-close {
opacity: 0 !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 {
opacity: 0 !important;
}

#1. Seeing

#2. Add to Design > Custom CSS

/* Mobile popup full image */
@media screen and (max-width:767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    object-fit: contain !important;
}
}

@tuanphan thanks! It seems off though. Your provided CSS was able to contain the image to the mobile screen width, but not make it fullscreen. See the before and after screenshots attached.

Here is all the CSS that we have used for this Pop Up. Maybe there is a conflict within it? We were first able to use the CSS to add an image. Then we made the close buttons disappear. Now we are trying to make the mobile popup fullscreen. I'm wondering if we had the order incorrect? Or there is a typo somewhere?

• Website: https://www.atria-advisorloans.com/
• Password: ATRIAlendingPORTAL

/* 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
}
}

/* popup close X */
.sqs-popup-overlay-close {
opacity: 0 !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 {
opacity: 0 !important;
}

/* Mobile popup full image */
@media screen and (max-width:767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    object-fit: contain !important;
}
}

On 4/6/2023 at 1:26 AM, LUDLOW said:

@tuanphan thanks! It seems off though. Your provided CSS was able to contain the image to the mobile screen width, but not make it fullscreen. See the before and after screenshots attached.

Here is all the CSS that we have used for this Pop Up. Maybe there is a conflict within it? We were first able to use the CSS to add an image. Then we made the close buttons disappear. Now we are trying to make the mobile popup fullscreen. I'm wondering if we had the order incorrect? Or there is a typo somewhere?

• Website: https://ludochat.com/ludo-club-mod-apk/
• Password: ATRIAlendingPORTAL

/* 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
}
}

/* popup close X */
.sqs-popup-overlay-close {
opacity: 0 !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 {
opacity: 0 !important;
}

/* Mobile popup full image */
@media screen and (max-width:767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="gallery"] .sqs-slice-gallery-item.loaded img {
    object-fit: contain !important;
}
}

 

Hey, thank you so much. It worked for me.