davidjames

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.