WordPress.org

Forums

Masonry - Can't get it to work (5 posts)

  1. marcoapaulo
    Member
    Posted 2 years ago #

    Hi everyone

    So, my problem it's "simple", I can't get Masonry plugin to work. I've tried everything, I even found some kind of guides that explained how to do it (since I'm not familiar with JS), but no success at all.

    Right now, I have the Masonry plugin on this page (http://quickreview.marcoalmeida.com.pt/), and I applied it as explained in Masonry official site.

    So, does anyone know what I'm doing wrong?

    (I'm trying to get this plugin work first before I create the rest of the layout, so don't pay attention to the sidebar with no style.)

    Thank you and I hope I posted this on the right forum.

  2. marcoapaulo
    Member
    Posted 2 years ago #

    If it helps, this is what I'm trying to achieve...

    http://i1040.photobucket.com/albums/b409/mafeed/soltas/layoutqr_zps9171e511.jpg

  3. Looking at your source I see this:

    <script>
    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 198
      });
    });
    </script>

    You need to change #container to the actual div id of the containing div which in your case is #containcontent.

    Also I would change columnWidth to 216 to allow a 10px margin on each side then in your css add the margin value:

    .item {
       width: 198px;
      float: left;
     margin: 10px;
    }
  4. marcoapaulo
    Member
    Posted 2 years ago #

    I can't believe it... I've been for, at least, one and an half hour trying to solve this and I only forgot to add the div... I feel so stupid... eheheheh

    Anyway, now something changed, but it's still not right. And again, don't know if it's CSS or something with Masonry.

  5. marcoapaulo
    Member
    Posted 2 years ago #

    FINALLY! I did it! Thanks to this ยป http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/

    And thank you Chris Olbekson for the reminder of the names :)

Topic Closed

This topic has been closed to new replies.

About this Topic