It’s not Netlify related as the issue occurs even just using npm run start.
When I load the page initially at a larger size then scale down the lightbox continues to work, however it never switches to the “mobile” layout:
If I hit refresh, I end up with a different single column “mobile” layout:
As you mentioned, it’s in that layout that the lightbox doesn’t work.
I’ve not looked at the code, but I’m guessing there is some JavaScript executing on page load premised on the width and it could be it’s not setting up the lightbox properly.
Update
I’ve spotted your issue, it’s caused by a combination of things, and will be a little tricky to explain.
As I’d guessed you are running some resolution specific JavaScript:
It triggers if the page is below 992px when it is first loaded:
The most important part for this explanation is that it searches the page for links and hijacks their behavior so they operate in a kind of “Single Page Application” fashion:
The two different behaviors (based on screen resolution) are thus:
-
Desktop
When you visit /works.html and click on an article link the browser actually navigates to that page, e.g.you end up on /article/tomorrow.html
-
Mobile
When you visit /works.html and click on the article link you do not navigate to the article page, it is being loaded into the existing page by the code shown above.
Entirely separate from this, the lightbox is powered by the lightbox.js file.
It executes only once on page load as it is contained within:
document.addEventListener('DOMContentLoaded', function () {
Those two pieces of information combined, reveal why your lightbox doesn’t work on mobile.
When the site is loaded at a smaller resolution the lightbox code fires and attaches the click handler to whatever images it initially detects in the page. When a link is clicked, the mobile code hijacks that click preventing the page from changing and instead inserts the new DOM elements. The lightbox code never refires (because there has been no page change) and those new images do not have the click handler attached.
The reason it works on desktop is because the pages are literally changing, and the lightbox code is executing each time.
There are many ways that you could adjust the site to fix the behavior, but it’s ultimately up to you, since it’s very much just your site code and absolutely “out of scope” for support here.
Hopefully my explanation has helped you though, best of luck!
