Javascript is not working in mobile format

Hello !

I am using eleventy and Netlify CMS for a website. One of my script called lightbox.js is working perfectly in desktop mode, however when I am in mobile format (<992px) the javascript is not working anymore. I have read that it could be due to the fact that it was ES6 but I used Babel to transform it to ES5 and the problem is still the same. The functionnality should open a lightbox when I click on an image of an article. It uses the template article.njk which is connected to base_works.njk to get the informations from the .md files.

Here’s the repo: GitHub - HugoLanglade/VICTOR_CMS_5

Thank you for your help

How is this anything to do with Netlify? Sounds more like an issue with your code.

Do you have a site to test?

@hugooooo As @dig has indicated, this forum is for assistance with Netlify’s products, so a request like this is “out of scope”, as you’re just seeking general web development assistance.

Your repository is abnormally large considering it’s a static site, perhaps because you’ve been committing the node_modules folder. (Update: It’s not that, there are some very large images in /src/assets/projets/)

Is this the lightbox that you’re talking about?

It works fine for me both with npm run start and npm run build && npx serve _site

Hey @nathanmartin,

Thank you for your reply !

Yes it is the lightbox I am talking about but it is working on your image because it is in desktop mode. The problem I encountered is when I am in mobile format (under 992px).

The javascript is working when it is raw html outside of eleventy or Netlify CMS so I was wondering if netlify might have some difficulties to read the javascript espacially on mobile format.

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.


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:

  1. Desktop
    When you visit /works.html and click on an article link the browser actually navigates to that page, end up on /article/tomorrow.html

  2. 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!

1 Like