[Resolved] Masonry sometimes messed up.

Home › Forums › Trusted Pro › Masonry sometimes messed up.

Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 2, 2017 at 2:26 pm #2996
    Adri Oosterwijk
    Participant

    Hi,

    I’m very happy with the masonry layout for archives. Especially the masonry for WooCommerce archives. However I noticed that sometimes the layout is messed up. See screenshot:

    reloading the pages fixes it. But I can’t expect a visitor to reload th page when it looks messy.

    I did some investigations and the solution should be the installation of the imagesLoaded.js file.

    Strange enough when searching the source code I did noticed that this script is already loaded.

    Hen I inspect the page I see that there are some errors.

    Any idea?

    December 2, 2017 at 6:36 pm #3002
    Andy
    Keymaster

    Thank you for letting us know about this issue.

    The theme did previously make use of imagesLoaded to only position the items after all images had loaded, but it didn’t work very well with the homepage product tabbed areas so we decided to not use it when we added masonry to the homepage tabs.

    We tested it without and didn’t see any issues but I will of course look into the issue and see if we can fix it.

    December 4, 2017 at 12:12 pm #3010
    Andy
    Keymaster

    Hi Adri,

    As a temporary fix, could you try adding this CSS and please let me know if this works for your site.

    .woocommerce ul.products li.product:before,
.woocommerce ul.products li.product:after,
.woocommerce-page ul.products li.product:before,
.woocommerce-page ul.products li.product:after{
    content: "";
    display: table;
}
    December 6, 2017 at 6:56 am #3035
    Adri Oosterwijk
    Participant

    Hi Andy,

    I added the code to my css file and it looks like it is working. I did noticed however that the imagesLoaded script is fired. I saw this line in my html output:

    <script type="text/javascript" src="http://stockphotosite.dev/wp-includes/js/imagesloaded.min.js?ver=3.2.0"></script>

    I don’t know if it is called but still…. I thought to let you know.

    I suggest to keep the thread open for a while. I will test it further and let you know.

    Best Regards,

    Adri

    December 6, 2017 at 10:46 am #3037
    Andy
    Keymaster

    Thanks for letting me know that the css is working for you.

    WordPress includes imagesLoaded by default when masonry is enqueued, so that is why you see it loaded in your html source.

    December 7, 2017 at 1:23 pm #3042
    Andy
    Keymaster

    Hi Adri

    Version 1.1.5 is now available with a fix for this issue.

    December 8, 2017 at 12:45 pm #3061
    Adri Oosterwijk
    Participant

    Hi Andy,
    After updating the theme (and disabling the temporary css fix) it looks ok Thank you for solving it this quick.
    I will mark this topic as solved. I will open a new one if needed.

    Have a good one!

    Cheers,

    Adri

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Masonry sometimes messed up.’ is closed to new replies.