I have found no way to remove dead space in lightboxes when using non-landscape aspect images. The light box is set to “frameless”, and it looks fine with a landscape aspect image…
But with square or portrait aspect images I get these huge side borders…
Which I REALLY don’t want. Any thoughts?
-SiP
The lightbox doesn’t gracefully handle landscape images as you can see. I’m not sure how to address it but I think the modal needs some additional logic added in order to calculate the width.
It’s on my todo, last time I tried I couldn’t get it working right across all browsers.
Instead of using frameless use full screen. This will keep all the areas outside of the image with a black background. It looks better that frameless for portrait images. Hopefully Norm will add a true frameless portrait either in next version of Blocs or in an update. Full screen is not perfect but I think it looks better.
Casey
I am using fullscreen, which looks good with landscape photos, but as soon as I want to use portrait, you have to scroll down depending on your screen…
Try making your portrait image about 800 px tall (long edge) before adding them. I make my landscape photos about 1200 long edge.
Here’s a link to my latest blog post. It has images with these dimensions to give you an example.
https://itsmytimephotography.com/backyard-birds.html
Casey
When it comes to images in landscape on mobile devices, what you are showing is actually the best practice way.
There are only two things you can do here.
And this is meant to help…
From a UX perspective the first option is familiar and a better alternative than the second.
also, take it from me (or not), but this “issue” shouldn’t take any more of your time. One of the trickier things about web design and development is that we are always wondering/questioning what “normal” behavior is. We can quickly lose time and energy trying to find best practice solutions. So real friends don’t let friend fixate over established patterns unless the idea is really really great!
Hope this helps someone.
I totally agree with you on this for mobile devices, this makes sense, but the screenshots are from computer screens in my example. I think the best option for me is to avoid portrait images, or to bring them down to about 700 to 800 px tall as @casey1823 mentioned.
That’s a good analogy from a UX perspective. I see so many users wanting features that are really not worth the effort and can have negative effects across breakpoints. There are reasons why Blocs work a certain way. For the most part, I try to work within Blocs and the tools made by developers.
Casey
You can use the vertical height “vh” unit to help with that. This makes the image only as tall as the viewport/screen.
img.some-class {
max-height: 100vh;
}
Break it down
Pro tip
If you had a navigation bar at the top of page you would use a css “calc” feature to adjust for the height of the navbar like this.
img.some-class {
max-height: calc(100vh - 80px);
}
where (-80px) is the height of the navbar. adjust accordingly.
Thank you @Whittfield, I have tried, but I think there is a conflict with what I already have with Mansory & Lightbox.
@media (min-width: 1200px) {
.card-columns { column-count: 6; column-gap: .5rem;}
img.mg-sm { margin-bottom: .5rem;}
.fullscreen-modal .modal-dialog{
width:70%!important;
max-width:95%!important;}
.next-lightbox, .prev-lightbox{
top: 47%;}
}
I found a way around by adding some transparent on the left & right of my photos, so they act like Landscape photos…
