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

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

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.

Related

Lazy loading - fontawesome

I have a site that is using fontawesome. I am lazy loading many of the CSS files to increase first page load time, etc.
However, I need the fa-phone-alt to working on first load because it appears at the top of the page.
Can anyone provide guidance as to how I an add inline style just for the fa-phone-alt so that it works without having to load the entire style sheet?
Hope I am explaining this well enough.
Thanks.
I'm not sure how to solve exactly what you're asking, but a workaround could be that you download an SVG of a phone and place it so it loads instantly.

Universal correct links from navigation partial (express.js & handlebars)

this seems like a very stupid question, but I really can't figure out how to do my navigation links properly.
I'm using express.js with handlebars as view engine.
My backend.handlebars has a naviation bar and loads in every sub-page of my backend under "/admin". It looks like this:
<nav>
Dashboard
Add Post
Edit Post
Categories
Static Text
</nav>
Now the correct routes are:
[server-adress]/admin/ for the dashboard
[server-adress]/admin/add for adding posts
[server-adress]/admin/edit for the editing posts
etc.
Now the way I've setup my links sometimes works and sometimes doesn't.
Sometimes every link works correctly when I'm in a sub-route like "admin/add" and want to go to "admin/edit".
Sometimes every link works when I'm under the main "admin/" to every sub-page, but not the other way around.
And sometimes everything works as intended, mostly when I delete the dot in front of the slash and then add it back end, restarting both times.
This obviously is too much of a gamble when deployed. As I don't know the absolute adress due to changing servers, I can't use absolute paths.
How do I go about this correctly?

Adding a slideshow to a webpage

I need help. Apologies if the information I provide is not sufficient. I'm sort of an all-arounder at this job and this task has been thrown at me.
I need to add a slideshow to a a webpage. I am not even sure what code I need: jQuery, CSS, or HTML.
The homepage of the website has a Nivio slider (can't access the code to this because its owned by a management company we can't afford to pay).
This is what the editing page looks like: screenshot
The website is http://evelyns-kitchen.com
I am looking to add something like the Nivio slider (if I can't actually add a Nivio slider). Smooth transition, clean, dots below photo to represent the image, left/right arrow. Let me know what other information I can provide! Thank you so much.
Use zoho reports www.reports.zoho.com where you can create reports dashboards slideshows and many more

UIWebView sometimes do not fully load page / images

I have the problem that sometimes in UIWebView a page is not fully loaded.
There is a picture gallery and if page is not fully loaded (means I don't get the delegate "ViewDidFinishLoading") some pictures are not loaded.
The picture gallery uses jquery.
As I mentioned it's not every time.
Are you looking to see if didFailLoadWithError: is getting called in this situation?
And if so, then find out why.

Disappearing form fields on IE?

I have been working on this site for some time and just launched it for a client.
People have actually had trouble beleiving I had done it on WordPress, though I don't see why...
Anyway, I suddenly see that the form fields of one of the forms on the site (Newsletter Registration) disappear while on IE, you get to see them for a second and puff, they're gone. I did check this previously on IE and it worked, I especially used CSS3 PIE to get the rounded effect for the fields on IE...
Link to website: http://www.doritsivan.com (hope this isn't considered promotion, not my intention)
site is based on WordPress and jQuery.
resolved the issue, thank you all. it was a bad case of relative vs. absolute positioning and the fields decided to go away (literaly)
A bunch of debugging with firebug-lite (btw was real to get it to work on my IE, kept on crashing or refusing to load altogether combined with IE popup and security issues) and I understoid that this was the issue, then some pixel fiddling and all was good. rechecked in Chrome, saw that result was exactly the same. job done

Resources