Full screen Lightbox image height solution Modal colour transparency

Tips and Tricks
1

Hi
Not sure if old news…
I was having issues with captioned portrait formatted images extending below the bottom of the page when using Full-screen Lightbox.
I found the following classes useful in controlling the height of the light-box modal container…

.modal-body img { max-height: xxxxvh; }

I found the following classes useful in controlling the background colour and width ( plus transparency)

.modal-content { background-color: rgba(xxx, xxx, xxx, 0.95); max-width: xxxx%; }
1 Like
2

Great to know ! I had the same issue and it took me a while to get everything the way I wanted but I have found a different solution.

.mx-auto {
max-width: 100%;
height:auto;
max-height: 90vh;}

See portfolio in the website

3

Thanks for your solutions! These seemed to be perfectly timed, just having the same problem with lightbox!

4

I am grateful for your enlightenment, but could you please inform where you would put in such codes. Would it be in a code bric, in the page header or?

I am about to employ light box effect myself and would appreciate a bit more info on this.

5

Hi @Solvberg, you have to add the code in the Header of the page.
This is the code I use for Lightbox in Full Screen (Frame).

<style>
.mx-auto {
max-width: 100%;
height:none;
max-height: 90vh;}
.fullscreen-lb{
background:rgba(0,0,0,0);
border-width:0px 0px 0px 0px;
}
.fullscreen-modal{
background:rgba(0,0,0,.8);
}
</style>
1 Like
6

Hi,
For everyone who is interested, i wanted a white background! For me, its much more pleasing.

.mx-auto { max-width: 100%; height:none; max-height: 90vh;} .fullscreen-lb{ background:#FFF; border-width:0px 0px 0px 0px; } .fullscreen-modal{ background:#FFF; }
7

another try…

<style>

.mx-auto {
max-width: 100%;
height:none;
max-height: 90vh;}
.fullscreen-lb{
background:#FFF;
border-width:0px 0px 0px 0px;
}
.fullscreen-modal{
background:#FFF;
}
</style>

1 Like
8

Thank you to both of you. Will try this out…