Masonry transition-enabled not displaying correctly (Rails, c9 environment) - ruby-on-rails

Question

I'm a Ruby on Rails beginner, following through the Pinterest clone guide by John Elder and I'm stuck on trying to apply masonry-rails and jquery.
I'm operating on c9.io and I have installed the required gems and used bundle install.
The problem I am having is that the display of my pins are still vertical and not responsive even though there are no errors displayed in loading.
What am I doing wrong?
Here is my code:
application.css
*= require 'masonry/transitions'
*= require_tree .
*= require_self
*/
pins.js.coffee
$ ->
$('#pins') .imagesLoaded ->
$('#pins') .masonry
itemSelector: '.box'
isFitWidth: true
pins.css.scss
#pins {
margin: 0 auto;
}
.box {
margin: 5px;
width: 214px;
}
.box img {
width: 100%;
}
index.html.erb
<div id="pins" class="transitions-enabled masonry">
<% #pins.each do |pin| %>
<div class="box">
<div class= "panel panel-default">
<%= link_to image_tag pin.image.url (:medium) %><br/>
<div class="panel-body">
<%= pin.description %><br/>
</div>
<% if pin.user == current_user %>
<dsv class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %><br/>
<%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require masonry/jquery.masonry
//= require_tree .

Answer 1

I finally managed to find a solution to the problem!
I just tried adding the additional lines to the application.css file:
*= require 'masonry/basic'
Adding this in is said to be optional in the textbook but they are in fact very necessary to ensure the displays work properly (in my opinion...I'm a beginner).