I was trying to do some more custom layout for blog overview. I was thinking of making collection items not equally distributed. For example in case of 2 column layout, right column would be moved a bit down comparing to left one. Have a look at the picture and all will be clear
I’m sure it can be done with JavaScript, wrapping all elements with the same class and giving every second of them different margin. But I would be super happy to make it just with Webflow. Do you guys have some idea ?
Sorry @webdev but I forgot to mention that I cannot share preview link because of client preferences. I believe that by looking at the screenshot it’s clear what we want to achieve.
@PeterDimitrov thank you for that solution. I need to play with it more to see how much I can control it but I think that’s already something although if you guys have some other solutions please share them!
Very simple structure:
---- Parent: collection list (with class unequal-list)
------- Child: collection item
-------------- div with class card inside (Its better to not add styles for the grid himself)
Add embed code (Or put this code before body/head). *I like more as embed → easier to make a copy paste + You see the visual change also in the editor.
Most of the times you want “stack” “equal” list on mobile. So put the custom code inside Media Queries: (In this example the list uneven only on webflow tablet and desktop).
<style>
@media only screen and (min-width: 768px) {
.unequal-list .w-dyn-item:nth-child(even) .card {
background: blue;
color:white;
margin-top:20px;
}
}
</style>
CSS Specificity
Important - add wrapper for the uneven list (Otherwise other collections may change).