I am working on a site, where they are going to post some articles or blogposts once in a while.
I was thinking about positioning the articles in two columns (only in desktop view probably) and all the articles in the second column are about 120-150px lower than the articles in the first one.
My only solution was to put there two dynamic lists, give the right column some top padding and limit the number of blogposts in left and right columns so the articles are not repeating. Is there a nicer way to do it?
I don´t know if my english is clear enough so here´s a screenshot. I´d just like to have one dynamic list there but same design and listed from newest to oldest posts like zigzag, left to right.
A way to do it with only one dynamic list, and providing you know how many elements fits in a vertical column, is to learn about CSS pseudo elements.
With a bit of CSS custom code, you’ll be able to define a rule like “Put a top margin on the 5th child of that element” which will achieve your vertical shift.
The one pseudo element you’re looking for is the nth-child, and the rule will look like:
Wow. That is a well written answer. Thanks for that
My “two dynamic lists” made the same thing. This first one is limited to show first four articles, second one shows 5th and 4 more, so the result equal.
No, sorry I missed it. I thought you are saying that the articles will be sorted vertically but with one dynamic list and limited items, … I get it now!
Thanks
Yes. I was thinking the same way, but maybe in a hidden div that show up when the button is pushed and reveal another few articles on the same page or soething… the website i am working on is about a specific movie for a production company that is about to being shot so there are not going to be that many articles. Thanks Vincent.