Basic instructions not working...?

[impressivewebs]

Hi, your tool seems nice in the demo on the home page, but I can't figure out how a basic demo is supposed to be set up from scratch.

For example:

https://codepen.io/impressivewebs/pen/rNNqgEM?editors=0010

I believe I've done whatever the instructions say, but I'm not seeing anything resembling a responsive grid that fits in the viewport. Am I supposed to do something to prevent the horizontal scroll bars? When I add a max-width to the container, it doesn't seem to help.

It might be good to include a demo with the unsplash images that looks practical and usable...? Just my two cents, but certainly my limited understanding of this library might be the main culprit here. Thanks.

[gilbitron]

If you're loading a page with images I suggest using something like https://imagesloaded.desandro.com and calling FlexMasonry.refreshAll(); once all of the images have loaded.

[impressivewebs]

Is that because you're concerned that the images should be loaded first? If that's the case then I should just be able to do:

window.onload = function () {
  FlexMasonry.refreshAll();
};

But that still doesn't fix the problem. I've even tried adding a timer delay before refreshing, and it still doesn't do anything different. I think you should set up a working demo that's based on the basic instructions, so users can play around with it.

[JoshuaCrewe]

@impressivewebs what about containing the images to the column width ?

img { 
  max-width: 100%;
  height: auto;
}

I did it on that pen and got some mixed results. When resizing the window it worked fine. Sometimes on load I'd get some gaps between the images. I think this is related to the PR which is open (#4) so adding

.grid {
    align-content: flex-start;
}

would get rid of those gaps I believe.