Grow your CSS skills. Land your dream job.

masonry not working in Chrome properly

  • # June 25, 2013 at 4:22 pm

    Hi, I am building a new site at [frictionmultimedia.com](http://frictionmultimedia.com “frictionmultimedia.com”) and I am using the masonry script for the first time.

    It works fine in Firefox and IE but in chrome all the boxes overlap and I cannot work out why. Can anyone give any suggestions?

    Any help is much appreciated.

    Thanks,
    Matt

    # June 25, 2013 at 4:52 pm

    Are you making sure to use the imagesLoaded plugin?

    # June 26, 2013 at 1:06 am

    > It works fine in Firefox and IE but in chrome all the boxes overlap and I cannot work out why

    I’m not very experienced, so my answer may not be very polished or even accurate but I hope my post helps.

    I came across similar problems while using masonry, and it appears(I may be wrong) that the only way one can make them work is to not specify any width to the masonry container – let it remain the full 100% width. This should apply even to any parent container – none of them should have any fixed widths or heights (only the masonry blocks can have them). That seemed to fix the problem.

    I did that on the browser and it did fix the layout somewhat. Not just that, the boxes even rearrange themselves when the browser is re-sized (with some fancy animated transitions). That is one way to check whether the plugin is working.

    Edit : A few other things – it appears that you have used an id twice – an id should not be used twice. The above method that I mentioned fixes the masonry part, but you’ll have to work on the header. You haven’t cleared the float of the image properly.

    # June 26, 2013 at 1:39 pm

    Thanks for the help guys, It is all fixed now, for anyone with the same problem go to https://github.com/desandro/masonry/issues/362

    Cheers,
    Matt

    # August 5, 2013 at 11:30 am

    Even if fixed now I don’t like that Masonry has to calculate all the layout, I’d rather be the one in charge with CSS, that’s why I use Salvattore. It uses a trick to use CSS as a syntax to set how the layout should work, even with media queries!

    https://github.com/desandro/masonry/issues/362

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".