Get a free trial // Grow your CSS skills // Land your dream job

Masonry not working >.<

  • # May 24, 2012 at 12:28 am

    After finally getting it work in JSFiddle and locally, masonry isn’t working on tumblr.

    If anyone else has had this problem, I’d really like to figure it, because it’s really annoying. Is it because it’s not an ordered or unordered list? I don’t know, but it’s bugging me. The worst part it is, it works locally so it taunts me like that.

    Anway, help is appreciated.

    # May 24, 2012 at 3:32 am

    Check your source code with Firefox, you have some error:

    Quote in an unquotes attribute



    theme 2 by: odd-e / copyright


    Stray doctype

    < !DOCTYPE html>

    < !DOCTYPE html>

    # May 24, 2012 at 11:38 pm

    I added the doctype in the html file, i forgot that tumblr inserts it for you.
    However, that hasn’t fixed it. :/

    # May 26, 2012 at 8:15 am

    You have declared masonry twice:

    /*        $('#posts').masonry({
    itemSelector: '.post'
    }); REMOVE */

    $(window).load(function() {
    itemSelector: '.post',
    isAnimated: true,
    isFitWidth: true


    # May 26, 2012 at 3:56 pm

    Still not working.

    # May 26, 2012 at 4:42 pm

    @Odd_E have you tried putting the scripts at the bottom, right before the body tag?

    # May 27, 2012 at 7:37 am

    here, is an example that i worked on ! i had issues with the script, later i figured it was a conflict with the jquery and my scrollto.js ! changed the positions of js, from head to the bottom and it worked. i guess it was because of the sequence of the scripts being called.

    # May 27, 2012 at 5:23 pm

    The bottom of the head or the bottom of the document?

    # May 27, 2012 at 5:26 pm

    Well I moved it, and it didn’t fix anything…

    This is really annoying.

    # May 27, 2012 at 8:18 pm

    @Odd_E “have you tried putting the scripts at the bottom, right before the body tag?”

    There may be a conflict, then. I’m not sure. It seems like it’s related to your CSS because the top one tries to animate.

    I just recently had an issue with my images using Masonry.js and the following code worked.

    var $container = $('#content');
    itemSelector : '#posts',
    isFitWidth: true,
    isAnimated: true
    # May 27, 2012 at 8:46 pm

    Your footer seems to animate as well so I believe it has to do with your CSS.

    # May 27, 2012 at 10:26 pm

    Do you have any idea where? Well the worst part is that it works locally, but it’s completely useless when on tumblr.

    # May 27, 2012 at 11:13 pm


    Change your masonry code to this:

            $(window).load(function() {
    itemSelector: '#posts',
    isAnimated: true,
    isFitWidth: true
    # May 28, 2012 at 2:42 am

    It works now, thank you. :-)

    # June 12, 2013 at 12:42 am

    Thank you soo much Chris. I had the same problem as OP. It seems that FF and IE need the line: isFitWidth: true which isn’t in the default code.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed