👉 Notice how the image is on the left in the first row and to the right in the next? That's the topic of this cloneable.
For a static layout this would be simple either rearranging the elements inside your grid or reversing the direction.
For a CMS collection this is not possible in Webflow without custom code.
So here it is, using a hack that's not really intended for this, but it gets the job done. The first line of code forces every second item to go from right to left. The second line forces the text wrapper to always be left to right so our text doesn't get messed up. Browser support is just fine.
<style>
.w-dyn-item:nth-child(even) { direction: rtl; }
.two-column-content { direction: ltr;}
</style>
--
Stay tuned to more cloneables on https://twitter.com/EmilVillumsen or here on Webflow
--
0 Comments