Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix too much unused space on mobile, landscape view #640

Closed
wants to merge 1 commit into from

Conversation

Zenju
Copy link

@Zenju Zenju commented Feb 5, 2019

Hi,

lightbox2 is great, I only have a single issue with it, namely too much unused space on mobile, landscape view:
landscape issue

In lightbox.js I find the magic number "120"
! maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;

I'm not sure what this is about. I may be wrong, but it seems the only height that needs to be subtracted is the top offset and the "lb-dataContainer" height below the image (45px in my case), thous:

maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 45 - self.$lightbox[0].offsetTop;

Now, when my site is in mobile mode, I can set #lightbox "top" to 0:
@media screen and (max-width: 1050px) { #lightbox { top: 0 !important; } }

And everything looks great, with no space wasted:
landscape fixed

@Zenju
Copy link
Author

Zenju commented Feb 5, 2019

This can be closed, pure CSS is the way to go: #641

@Zenju Zenju closed this Feb 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant