Update ShortPoint Dialog and Lightbox Windows to fill the whole screen : ShortPoint Support

A

Ali Alawieh

started a topic almost 7 years ago

Hello,

I just wanted to know how can we make the width of the lightbox linking option to be 100% of the screen.

Thank you,

Best Answer

A

Anas Nakawa said almost 7 years ago

Hello Ali,

To update the lightbox linking option and make it expand to fill the whole screen, please follow these steps:

1. Open the ShortPoint Theme Builder ( by going to Site Settings > ShortPoint Dashboard > Site Customizations > and click on the Customize my site button )

2. Then navigate to Utilities > Custom CSS and paste the following code into the Custom CSS field

/* lightbox container selector */
.mfp-iframe-holder .mfp-content {
    max-width: 100vw;
    height: calc(100vh - 50px); /* we need to make room for the (x) button */
}

3. Finally Click on Apply & Publish

Your end result should be similar to the following screenshot

Anas Nakawa

said over 6 years ago

Hello Shane,

Right now it is not yet possible to add Custom CSS that will affect one lightbox on the page and not all of them,

We will add minor update to the product to make it possible,

I will let you know once this is ready.

Thanks

S

Shane

said over 6 years ago

Hi there,

I've figured out that if I only want to modify the size of a lightbox on one page and not the entire site just insert the above code into a Script Webpart within <style></style> brackets which has been successful. I've been able to modify the Max-width and height variables of your original code to create Pop-up Menus for links on a page which has been great. The only problem is that I have more than one link on a page that uses lightbox and would like to customize the lightbox size of each of those link individually. Is that possible?

Anas Nakawa

said almost 7 years ago

Answer

Hello Ali,

To update the lightbox linking option and make it expand to fill the whole screen, please follow these steps:

1. Open the ShortPoint Theme Builder ( by going to Site Settings > ShortPoint Dashboard > Site Customizations > and click on the Customize my site button )

2. Then navigate to Utilities > Custom CSS and paste the following code into the Custom CSS field

/* lightbox container selector */
.mfp-iframe-holder .mfp-content {
    max-width: 100vw;
    height: calc(100vh - 50px); /* we need to make room for the (x) button */
}

3. Finally Click on Apply & Publish

Your end result should be similar to the following screenshot