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 the pop up page 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)

xwx.PNG
xwx.PNG492×832 82.9 KB

Thanks in advance

2

@JADIS

Please share your site URL,
I will check out the issue and provide you a solution here.

3

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:

.product-popup-modal__content {
    height: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding-bottom: 40px;
}

PageFlyRichard_0-1677588255818.png
PageFlyRichard_0-1677588255818.png372×584 50.7 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

I work for the pop up ⓘ but this changed my other pop up “comment on mesure” which is problematic because I would like only the pop up ⓘ to be modified, do you have a solution ?

5

jadis-shop.com

password : rj

6

Hi Jadis,

If you want a smaller popup to show only on mobile, then I suggest you use Poptin’s popup builder to achieve this. You can create a popup and edit the size of the popup, as well as include display settings that only allow it to be shown on mobile devices.
That way, you can have the same popup design but it is customized for mobile and web display.
I hope this helps.

7

Thank you for your answer, but is it possible to have a pop up by clicking only on my button ⓘ ? I’m not talking about pop up to retrieve emails.

Thanks in advance

8

Hi @JADIS ,

You can try below code in section-main-product.css 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

9

unfortunatly it doesn’t work man…

10

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

I hope it would help you
Best regards,

Richard | PageFly