Pop-up promotion

Hey there y'all,

I'm having a bit of trouble with my Promotional Pop-Up... I got it working fine for the desktop with the image, but the image is not loading on the mobile version. It shows up as an ugly grey. Considering nothing on my site is grey it does clash with everything. I saw another post here 2 years ago about it being by design. Is this still the case years later?  I see no options or explanations on how to change this.

Is there a way I can just change the background color of the pop-up to black if I can't use an image? It's just that grey is so terrible. 

Edit: Never mind I did solve the problem.

I went to the sidebar menu for the pop-up promotion, hit style, enabled mobile-specific styles at the very bottom, and changed the background to black there at the Color Behind Text option.

If you want to show image on mobile, you can also add this 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;
}
 .sqs-slice-group.group-copy.copy-layer-background {
    z-index: 99999999;
    background-color: transparent !important;
}
a.sqs-popup-overlay-close {
    z-index: 9999999 !important;
}
}

@tuanphan I have a pop-up with the image/text side-by-side layout: https://revivalskinartistry.com/

Is there a way to use this code to show the image above the text on mobile? with that CSS it shows on mobile but only behind the text 

On 4/15/2023 at 2:26 AM, jonuehring said:

@tuanphan I have a pop-up with the image/text side-by-side layout: https://revivalskinartistry.com/

Is there a way to use this code to show the image above the text on mobile? with that CSS it shows on mobile but only behind the text 

Use this new code

@media screen and (max-width:767px) {
.sqs-popup-overlay-content .sqs-slide {
    position: fixed !important;
    bottom: 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-slice-group.group-copy.copy-layer-background {
    z-index: 99999999;
    background-color: transparent !important;
    top: 50%;
}
a.sqs-popup-overlay-close {
    z-index: 9999999 !important;
}
    .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slide-layout-id="overlay-center-card-02"] [data-slice-type="gallery"] {
        width: 100% !important;
        height: 50% !important;
    }
    .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .layer-front, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
        height: 500px !important;
    }}

Hi is there a way to change the white promotional pop up background on mobile to a hex colour of my choice? Currently, it' is just white.

Also is there a code for each other element such as the Title, paragraph, each form field, button and disclaimer for mobile only?

On 10/24/2023 at 3:20 PM, missgray said:

Hi is there a way to change the white promotional pop up background on mobile to a hex colour of my choice? Currently, it' is just white.

Also is there a code for each other element such as the Title, paragraph, each form field, button and disclaimer for mobile only?

If you share link to your site, we can check easier