Skip to main content

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?

Great to see you in the Community @MarkH! Thank you for your question. I am sending this over as a ticket to support as I expect they will need to investigate this with the webpage url you’ve set up. 


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;
        }
    }
    


Reply