colorlib personal template pictures are loading on top of each other until the page is refresh, any pointers on where I should be looking?

I am using the template from When displaying pictures on the ‘portfolio’ tab, the images load on top of each other at first. If you refresh the page it loads fine. Just wondering where I should be looking to fix this? Javascript, HTML, or CSS? I have been looking at Javascript but cannot figure out how to refresh just the image formatting after the page has loaded. Is this even the right approach?

Here is an image of what is is doing on my site. Is ‘should’ be a nice 3x3 display.

I have the basic code here on github

Others have complained about this as well in the comments section of the template on colorlib. I have also reduced the picutre image size.

If I can just be pointed in the right direction I can research and try to figure it out.