Quantcast
Viewing all articles
Browse latest Browse all 14

Wrong Media Position in Lightbox

On some pages, other JS scripts or conflicting CSS rules might prevent the lightbox script to correctly determine the window dimensions, causing elements inside the lightbox to be shown either outside the visible screen, or at best, offset from the center of the screen, where it is supposed to be shown.

It is possible to correct the issue by adding some custom CSS to your page:

body .nch-lb-media-scroller {
    width: 100% !important;
    max-width: 100% !important;
}
body .nch-lb-media {
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

This custom CSS will effectively disable all advanced transitions of elements inside the lightbox, only allowing for a basic fade transition. The reason being that all other transition effects require the lightbox to know the exact window dimensions in order to calculate entry/exit positions.

 


Viewing all articles
Browse latest Browse all 14

Trending Articles