Search code examples
layoutfancyboxbootstrap-5masonrylightgallery

Bootstrap 5 + Masonry + Fancybox gallery getting destroyed when uploaded to hosting


I have a problem with using Bootstrap plus Masonry for my layout. Trying it out on my computer, it works perfectly, but when I upload it to GitHub pages or Godaddy hosting, it sometimes gets destroyed like the image I shared. I bought Lightgallery and tried it instead of Fancybox to make the photo gallery, just in case something there was making a problem, but it's the same.

The problem being Masonry or bootstrap, I can't get rid of bootstrap but could use an alternative to Masonry. My client just needs the Pinterest-like layout.

It's very frustrating because it works perfectly until it is live. I tried a lot of things but nothing has worked. Thank you for any idea you could give me, and sorry for my bad English.

Github link: https://m-ribero.github.io/mubles-ballena/galeria.html

edit: Very important detail, it often gets fixed after reloading or resizing the page, but for the first time someone enters there, then it doesn't motivate people to invest more time in the site if it looks that bad.

gallery destroyed

gallery destroyed 2


Solution

  • The problem is with Masonry and not Fancybox (or any other lightbox alternative). Looks like it incorrectly calculates height for the container. Since it works after assets have been cached, I guess that your masonry script does all calculations before your CSS is loaded. Therefore top/bottom padding is not taken into account for calculations.