Streaming live at 10am (PST)

Aligning divs (alternate: left then right) within collection list


#1

Hello, I would like to align my divs alternatively within collection list. How do I go about this? (attached)


Here is my site Read-Only:
https://preview.webflow.com/preview/abhisheks-radical-project-01cb06?preview=ce511992eda0a48e7301f43056021594

here is what I want:


#2

Custom code with CSS :nth-child() selector, with ODD and EVEN values

https://www.w3schools.com/CSSref/sel_nth-child.asp

This way you can give different positioning properties to odd and even items.


#3

hello Vincent, wouldnt that imply that I change my values at every breakpoint to keep this responsive?


#4

Inside of the custom code? Not necessarily.

Your design can be achieve with a float left or right to make the elements stick to the left and the right.

So for example make them all float left inside of Webflow, then add custom code targetting the EVEN rows and make them float:right. This doesn’t need to be adjusted for responsivity. You’ll play with the dimensions of your elements to address responsivity.