bootstrap lightbox does not appear when in class "visible-tablet" and "visible-phone"

Question

I am using this original bootstrap lightbox: http://jbutz.github.io/bootstrap-lightbox/

I strip it down and the image link into div class "visible-tablet" and "visible-phone". When in this class, the pop up image does not appear. For example here:

http://www.getaveo.com/_bootstrap4/lightbox4.html

1) Please view that page in desktop view, above 900px. Now click on the image thumbnail on the right, red column. Large image pops up, lightbox is working, great.

2) Now please make your browser smaller like ipad view or 700px wide. Red column pops down because of "visible-tablet". Now click on the image thumbnail. Large image pop up does not appear, does not work.

3) Same with phone view 500px or less. "visible-phone" click on image thumbnail. Large image pop up does not appear, does not work.

How do I get the image thumbnail to pop up, lightbox to work when in "visible-tablet" and "visible-phone"?

Answer 1

The with class fluid-row in which you have the lightbox has "visible-desktop" class. This hides the whole div when you decrease the window size. Since the parent div display is now none - all the children (including the lightbox) are hidden. This happens because you have non unique ids in your HTML. id of the element should be unique - you have the same div id="demoLightbox" multiple times. So it picks the first one.

Create separate div ids for each of the versions (desktop, table, phone).