Alternate cms layout

Hello, I know this question has been answered and even followed along with this tut video How to Webflow: Creating unique collection list layouts - Tutorial (2019) - YouTube

So I want to make a cms alternate layout for every other collection item and I cannot seem to get it to work. Still getting used to custom code in webflow.

Alas! when I do it it does not seem to be working. I went inspecting and cant seem to find the style. I do have a deadline on this project and wanna get everything wrapped up asap, :pray:

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=designer&utm_content=zocalo-food-park&preview=49d8eb327bc87891232ae8edae3d4c81&pageId=5fa32fcd4367a775af1eca6c&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Ok found the solution, and it is more specific.

I will just quote the person

Blockquote


Byron

Jan '18

Hey so I had this same issue with the same exact layout on a blog post collection page.

There is a neat way around it with some custom code using CSS :nth-child pseudo class as @garymichael1313 pointed out.

Firstly you need to build your collum’s using flex box and not the Webflow collumns.

Make sure to give the row wrapper a unique class. In this case mine was . blog-flex-row

Once you have it built out, obviously all the images will be one side which is not what you want.

Then add this custom CSS code

  .w-dyn-item:nth-child(even) .blog-flex-row {
      flex-direction: row-reverse; 
  }

This selects every second row and reverses the flex direction so that now the image will appear on the right as you have it.

The nice thing about this method is that it will update dynamically when you add new items into the CMS.

Hope this helps anyone with the same issue.

Blockquote