Bootstrap + Masonry Incorrect Stacked Images

Question

Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/originals.html

I'm attempting to use Masonry to create a gallery on a Bootstrap 4 built site. When loading on local server, the masonry shows as desired, see image:

But when uploading the site to a shared hosting account, the images display incorrectly. See the first link here.

My html, css, and js is a slight customization of Masonry's original code:

HTML:

<section id="available">
                <h1>Originals</h1>
                <div class="line-separator-sm"></div>
                <div class="grid">
                    <div class="grid-sizer"></div>
                    <div class="grid-item two-to-one">
                        <img src="images/available/1.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/2.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/3.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item four-to-five">
                        <img src="images/available/4.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/5.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-two">
                        <img src="images/available/6.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/7.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/8.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item five-to-eight">
                        <img src="images/available/9.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/10.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item two-to-three">
                        <img src="images/available/11.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/12.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item one-to-one">
                        <img src="images/available/13.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item two-to-one">
                        <img src="images/available/14.jpg" width="100%" height="auto"/>
                    </div>
                    <div class="grid-item three-to-two">
                        <img src="images/available/15.jpg" width="100%" height="auto"/>
                    </div>
                </div>
            </section>

CSS:

/* ---- grid ---- */

.grid {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow:0px 0px 2px #888;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width:20px;
}

.grid-item {
  margin:5px;
}

.one-to-one   { width: 150px; height: 150px; }
.one-to-two   { width: 150px; height: 300px; }
.two-to-one   { width: 300px; height: 150px; }
.two-to-three { width: 150px; height: 225px; }
.three-to-two { width: 225px; height: 150px; }
.three-to-five{ width: 150px; height: 250px; }
.five-to-three{ width: 250px; height: 150px; }
.four-to-five { width: 150px; height: 187.5px; }
.five-to-four { width: 187.5px; height: 150px; }
.five-to-eight{ width: 150px; height: 240px; }
.eight-to-five{ width: 240px; height: 150px; }

JS:

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    horizontalOrder: true,
    fitWidth: true  
  });

Any ideas what I've done wrong?

Answer 1

The answer is simple. Thanks to @ksav I used the inspector to discover the 404 errors caused by an incorrect <script> paths. They were written as /js/... and correcting them to js/... did the trick. Thank you!