How can we help you today?

Start a new topic
Answered

Update ShortPoint Dialog and Lightbox Windows to fill the whole screen

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

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


image



1 person has this question

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


1 person likes this

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? 



1 person likes this
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


image


Login or Signup to post a comment

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more