Search code examples
javascripthtmlcsscodepen

Why is this code working in codepen but not actual site/fiddle?

I am forking this code from Codepen to use on my site but I am not sure why it is breaking everywhere other than Codepen. I tried testing it on JS Fiddle too and results are the same. Please have a look:

(function ($) {
    'use strict';

	$(window).load(function(){

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

	});
    
}(jQuery));
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

@media (max-width: 480px) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media only screen and (max-width: xxspx) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .masonry {
    margin: 2.25% 0;
  }
  .masonry .grid-sizer {
    width: 31.83333%;
  }
  .masonry .gutter-sizer {
    width: 2.25%;
  }
  .masonry .item {
    width: 31.83333%;
    margin-bottom: 2.25%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .masonry {
    margin: 2% 0;
  }
  .masonry .grid-sizer {
    width: 23.5%;
  }
  .masonry .gutter-sizer {
    width: 2%;
  }
  .masonry .item {
    width: 23.5%;
    margin-bottom: 2%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .masonry {
    margin: 1.875% 0;
  }
  .masonry .grid-sizer {
    width: 18.5%;
  }
  .masonry .gutter-sizer {
    width: 1.875%;
  }
  .masonry .item {
    width: 18.5%;
    margin-bottom: 1.875%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .masonry {
    margin: 1.8% 0;
  }
  .masonry .grid-sizer {
    width: 15.16667%;
  }
  .masonry .gutter-sizer {
    width: 1.8%;
  }
  .masonry .item {
    width: 15.16667%;
    margin-bottom: 1.8%;
  }
  .masonry .item img {
    width: 100%;
  }
}
<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
</div>

Please have look at the original source on Codepen: https://codepen.io/jdlaplan/pen/Aowpj

JS Fiddle Test Link: https://jsfiddle.net/12szr1f9/2/

Note: I have presented the compiled CSS here while the Codepen source uses SCSS preprocessor.

Solution

  • You need to include the libraries which your code is using (Masonry and jQuery) by adding the following code in your HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

    You CodePen had those libraries included, while jsfiddle and original website didn't have it. This was causing the promlem!

    (function ($) {
    'use strict';

	$(window).load(function(){

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

	});
    
}(jQuery));
    * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

@media (max-width: 480px) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media only screen and (max-width: xxspx) {
  .masonry {
    margin: 3% 0;
  }
  .masonry .grid-sizer {
    width: 48.5%;
  }
  .masonry .gutter-sizer {
    width: 3%;
  }
  .masonry .item {
    width: 48.5%;
    margin-bottom: 3%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .masonry {
    margin: 2.25% 0;
  }
  .masonry .grid-sizer {
    width: 31.83333%;
  }
  .masonry .gutter-sizer {
    width: 2.25%;
  }
  .masonry .item {
    width: 31.83333%;
    margin-bottom: 2.25%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .masonry {
    margin: 2% 0;
  }
  .masonry .grid-sizer {
    width: 23.5%;
  }
  .masonry .gutter-sizer {
    width: 2%;
  }
  .masonry .item {
    width: 23.5%;
    margin-bottom: 2%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .masonry {
    margin: 1.875% 0;
  }
  .masonry .grid-sizer {
    width: 18.5%;
  }
  .masonry .gutter-sizer {
    width: 1.875%;
  }
  .masonry .item {
    width: 18.5%;
    margin-bottom: 1.875%;
  }
  .masonry .item img {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .masonry {
    margin: 1.8% 0;
  }
  .masonry .grid-sizer {
    width: 15.16667%;
  }
  .masonry .gutter-sizer {
    width: 1.8%;
  }
  .masonry .item {
    width: 15.16667%;
    margin-bottom: 1.8%;
  }
  .masonry .item img {
    width: 100%;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x170" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x180" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x190" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200" alt="" />
  </div>
  <div class="item">
    <img src="http://placehold.it/200x210" alt="" />
  </div>
</div>