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?