CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-masonry
JGallardo
JGallardo

Reputation: 11383

Layout in masonry not resizing images into columns as expected

I have a blog concept that I am building on CodePen

That currently looks like this

problem

The width is set by

JavaScript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 240,
  itemSelector: '.item'
});

HTML

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 240, "itemSelector": ".item" }'>

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }

But things are just stacking on top of each other.

EDIT
It is working now but I am not able to delete the question.

new

Upvotes: 0

Views: 627

Answers (1)

Maurice Botha
Maurice Botha

Reputation: 125

<div class="item w2">
        <div class="item">
          <div class="postContent">
            <img src="http://media.tumblr.com/tumblr_ma8wodZv3b1rwp3js.jpg" width="300">
          </div>

          <div class="notes">
            <a href="#">
              666 notes
            </a>
            <a href="#">
              Janurary 3, 2013
            </a>
            <a href="#">
              Reblog
            </a>
          </div> <!--/ .notes -->
        </div>


        <div class="item">
          <div class="postContent">
            <img src="http://www.dayo.com/fishid/christoftheabyss_3.jpg" width="300">
          </div>
          <div class="notes">
            <a href="#">
              666 notes
            </a>
            <a href="#">
              December 12, 2012
            </a>
            <a href="#">
              Reblog
            </a>
          </div> <!--/ .notes -->  
        </div>

        <div class="item">
          <div class="postContent">
            <img src="http://media.tumblr.com/tumblr_lw20o3UCOL1r1h2ku.jpg" width="300">
          </div>
          <div class="notes">
            <a href="#">
              12 notes
            </a>
            <a href="#">
              June 1, 2012
            </a>
            <a href="#">
              Reblog
            </a>
          </div> <!--/ .notes -->
        </div>
</div>

CSS Adjustment

.item { width: 320px !important; float:left !important; }
.item img { width: 300px !important; float:left !important; padding:10px !important }
.item.w2 { width: 960px !important;  }

Upvotes: 1

Related Questions