CODEWITHSUNDEEP
jquerycsslightboxlightbox2
Dɑvïd
Dɑvïd

Reputation: 1987

Responsive layout constraining horizontal display in Lightbox2 overlay

I use Lightbox2 on several sites for "galleries", and never had a problem. I am now attempting to use it with a Simple Responsive template (or on Github), and running into a problem:

When the overlay comes up and the images "zoom" to their proper size, they are restricted horizontally -- as if the browser thinks it only has a very narrow viewport. I get the same result in FF and Chrome.

If I look at it with "Inspect Element" in Chrome, the #lightbox main DIV is 1265px wide. But the .lb-outerContainer and .lb-dataContainer both think the width available is 247px.

I have read through the CSS and JS as carefully as I can, but cannot spot where the problem arises. I'm hoping some other sharp eyes can spot the problem.

Upvotes: 1

Views: 364

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

It is this section in the Simple Responsive Template that is causing the "problem"

/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}

You can remove this restriction by adding after the responsive template css

.lb-image {
    max-width: none;
}

And since you want your lightbox to be responsive add

.lb-outerContainer  {
    max-width: 100%;
}

instead and all should be good!

Upvotes: 2

Related Questions