Different Pop Up On The Product Page Between Desktop And Mobile

Store Design
, , ,
1

Hello

I would like to know if it is possible, on the mobile version of my site, that only the pop up ⓘ is not as big, I would like the pop up to only display the content of the pop up page without adding any white space below (the white added below = the area I have circled in red on the photo below)

JADIS_0-1677660118945.png
JADIS_0-1677660118945.png492×832 82.9 KB

My website : jadis-shop.com

password : rj

Using Dawn theme

Thanks in advance

2

Hi @JADIS ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .product-popup-modal__content {
    height: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding-bottom: 40px;
}

I hope it would help you
Best regards,

Richard | PageFly

3

unfortunately it doesn’t work…

4

Hi @JADIS

You can try below code in section-main-product.css:

#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .product-popup-modal__content {
    height: auto;
    width: auto;
    min-width: 300px;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding-bottom: 30px;
}

PageFlyRichard_0-1677750670014.png
PageFlyRichard_0-1677750670014.png1163×830 140 KB

I hope it would help you
Best regards,

Richard | PageFly

5

It works ! Do you know how to have transparent border for the pop up page please ?

6

Hi @JADIS ,

You can try below code in section-main-product.css::

#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .product-popup-modal__content,
#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .product-popup-modal__content-info {
    padding: 0 !important;
}
#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 {
    line-height: 1;
}
#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .h2 {
    display: none;
}
#PopupModal-0b9796ea-de4b-4373-87e4-88d9e3aa98b0 .product-popup-modal__toggle {
    position: absolute;
    right: 10px;
    top: 10px;
}

I hope it would help you
Best regards,

Richard | PageFly