Fri, 2021-07-30 06:14
Hello,
My site is based on Joomla and I use k2 extensions to display photos in a Masonry Style (because photos are not of the same height.
The link is here : Photo website dedicated to Mauritius
The photos are displayed correctly but not in the right order.
I would like the output to be: | item 1 | item 2 | item 3 | item 4 | item 5 | item 6 | item 7 | item 8 | item 9 | item 10 | item 11 | item 12 how the items are being displayed now: | item 1 | item 4 | item 7 | item 10 | item 2 | item 5 | item 8 | item 11 | item 3 | item 6 | item 9 | item 12
My CSS:
.tagItemList { -webkit-column-count: 4; -moz-column-count:4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin: 1.5em 0; padding: 0; font-size: .85em; } .tagItemView { display: inline-block; background: #fff; padding: 1em; margin: 0 0 33px; width: 100%; -webkit-transition:1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 2px 2px 4px 0 #aaa; border: 1px solid #eaeaea; } .tagItemView img { max-width:100%; }
I think it's the way Column-count CSS works. Getting the layout in rows (i.e. same height adjusted to fit in one row) would surely sort out the issue but I prefer the Column-count layout.
Is there a simple trick (preferably without JS) that can make the ordering happen ?
P.S. I wanted to annex the HTML layout file (in zip) here but error message when posting.
Thanks !
