Thank you for the tutorial. I've got this working. However:
For the list items (displayed underneath the categories) when I use the Masonry template - the first set of articles (just images) underneath the first category seems to display fine. But the next set of items (just images) are displaying underneath each other.
This is what is happening with the CSS (using Masonry template for article list)
First set (category) :
First item:
<div class="item" style="position: absolute; left: 0px; top: 0px;">
Second item:
<div class="item" style="position: absolute; left: 220px; top: 0px;">
Third item:
<div class="item" style="position: absolute; left: 440px; top: 0px;">
Second set (category) :
First item:
<div class="item" style="position: absolute; left: 0px; top: 0px;">
Second item:
<div class="item" style="position: absolute; left: 0px; top: 250px;">
Third item:
<div class="item" style="position: absolute; left: 0px; top: 500px;">
As you can see the first set is displaying in one line and the second set underneath each other - even though the same list is being is used?
If I setup a menu item to the List Search type of the articles then they display fine - it's only when used with the Form/List field as above that the display issue is happening.