Responsive lightbox css [#1630630]

Here is a code snippet to make lightbox2 responsive.

Add this to your css file:

/* Responsive lightbox */
#lightbox2-overlay {width:100% !important;}
#outerImageContainer {
	max-width: 100%;
	height: auto !important;
	width: auto !important;
}
#imageContainer, #frameContainer, #modalContainer {
	height: auto !important;
	max-width: 100% !important;
}
#imageDataContainer {width: auto !important;}
#lightboxImage {
	height: auto !important;
	max-width: 100% ;
}

Comments

Comment #1

honza pobořil commented 3 March 2014 at 22:15

Version:	6.x-1.9	» 7.x-1.x-dev
Issue summary:	View changes

How about to make it active in D7 branch?

Comment #2

schtink commented 12 August 2015 at 19:53

I am using the "Lightbox2 Lite" option and the following CSS works for me:

#lightbox2-overlay {width:100% !important;}

#lightbox, #lightboxImage, #lightboxDetails {
	max-width: 100% !important;
	height: auto !important;
	width: auto !important;
}