I’ve run into an issue when embedding a collection on a web page. It works fine on desktop, but on mobile view, the lightbox popup doesn’t scale to fit the screen, and essentially crops off the image, only showing the right hand info box and download button.
Has anyone found a fix for this?
Solved
Embed Collection lightbox display issues on mobile
Best answer by MarkH
Thanks Ryanne.
We managed to bodge it with some hacky CSS so the left and right columns stack vertically (sketchy code below for anyone else running into this issue) so it’s OK for now. But it’s not really an ideal solution as it doesn’t look great.
It would be great to see if support have a better solution though thanks!
/* mobile lightbox fix */
/* left image */
@media screen and (max-width: 767px) {
#bynder-widget-lightbox>.bynder-widget-figure>div.bynder-widget-table-wrapper>.bynder-widget-cell-wrapper {
height: auto!important;
}
}
/* right detail panel */
@media screen and (max-width: 767px) {
#bynder-widget-lightbox>.bynder-widget-figure>div.bynder-widget-table-wrapper>.bynder-widget-cell-wrapper, #bynder-widget-lightbox>.bynder-widget-figure>.bynder-widget-table-wrapper>.bynder-widget-overlay-detail {
margin-top: 50px!important;
margin-bottom: 0px!important;
display: block!important;
width: 100%!important;
height: 150px!important;
}
}
+1Great to see you in the Community
Thanks Ryanne.
We managed to bodge it with some hacky CSS so the left and right columns stack vertically (sketchy code below for anyone else running into this issue) so it’s OK for now. But it’s not really an ideal solution as it doesn’t look great.
It would be great to see if support have a better solution though thanks!
/* mobile lightbox fix */
/* left image */
@media screen and (max-width: 767px) {
#bynder-widget-lightbox>.bynder-widget-figure>div.bynder-widget-table-wrapper>.bynder-widget-cell-wrapper {
height: auto!important;
}
}
/* right detail panel */
@media screen and (max-width: 767px) {
#bynder-widget-lightbox>.bynder-widget-figure>div.bynder-widget-table-wrapper>.bynder-widget-cell-wrapper, #bynder-widget-lightbox>.bynder-widget-figure>.bynder-widget-table-wrapper>.bynder-widget-overlay-detail {
margin-top: 50px!important;
margin-bottom: 0px!important;
display: block!important;
width: 100%!important;
height: 150px!important;
}
}
Login to the community
No account yet? Create an account here!
Bynder Employee SSO
Bynder Employee login hereor
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.