Hi there,
I’ve built an acf-gallery and integrated the lightbox-shortcode into the mec single template. Works fine so far, but dependiing on the original image at about 640px downwards looks a bit messy. Landscape images are wider than viewport-width and prev and next images are overlapping.
I started adjusting with css:
@media only screen and (max-width: 640px) {
.ilightbox-holder.light {
width: 80vw!important;
background: transparent;
}
.ilightbox-holder.light:not(.ilightbox-prev):not(.ilightbox-next) {
left: 10vw!important;
}
.ilightbox-holder.light:not(.ilightbox-prev):not(.ilightbox-next) .ilightbox-container {
width: 100% !important;
}
.ilightbox-holder.light:not(.ilightbox-prev):not(.ilightbox-next) .ilightbox-container img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center center;
object-position: center center;
font-family: 'object-fit: contain; object-position: center;';
width: 100%!important;
height: 100%!important;
}
}
Result is this:
looks better but (of course) messes with transitions. So before I go on styling the whole thing I wanted to ask if you came across this issue before and maybe already solved it. Or maybe it would work but something is interfering with the output?
Would be great if you could share your experience on that matter with me 
Cheers Patrik
PS: Out of curiosity: is there a reason why the prev and next buttons are set to display: none by default?
(.ilightbox-toolbar.light a.ilightbox-prev-button, .ilightbox-toolbar.light a.ilightbox-next-button)
