Alternating dynamic content

Hey guys question,

Stage: http://magicair-solution.webflow.io/products
Share: https://preview.webflow.com/preview/magicair-solution?preview=a8f9b7a4ca84e1cf8324d99d6a971d34

That site has some custom code to alternate the dynamic content. But the heading and lightbox link isn’t working no matter what I do. Thanks.

.product-container.w-dyn-item:nth-child(even) { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .product-info-container.product-info-heading:nth-child(even) { /* FYI TRIED SOMETHING LIKE THIS TOO */ text-align: right !important; } .product-info-paragraph:nth-child(even) { text-align: right; } .product-lightbox:nth-child(even) { text-align: right; }

share link not working

Added thanks so much for bringing this to my attention.

Is it the product section? From My understanding the way to alternate dynamic content is to set the limit on the dynamic list

and then add another dynamic list and do the same. Start at 2 limit 1 and so on.
I think you can have a maximum of 10 dynamic lists on one page.

if there is a code way I do not know it. All of your items in a dynamic list have the same CSS styles applied this is the only way I know to be able to alternate in webflow

always
Jer

Hey man, that is not what I was trying to solve. Basically, the issue is that I can’t figure out how to target the two elements using :nth-child(even). I have the layout itself alternating just not the “heading and lightbox.”

There is no product-container on your home page.

1 Like

So does that code work to alternate dynamic content?

what is the webflow.io published link would love to see it in action.

No, as stated in the original post it is on the /products page.

Hey man yes, this works. You can see a better example of it on a different site I used it for located here.

Great solution! To alternate layouth with the same CMS item, I repeat the section as items I need. In settings each one Limit Items to: Start at 1 - Limit at 1, and filter by counter, set 1 to 4.

By the way, this is no longer needed.
Collection Lists have alternating style states available in the state dropdown, so you can do this all in the designer.

  • Set your collection item as Flex, aligned horizontally
  • Place your two inner items, your text div and your image div inside. pad, margin, style as desired
  • Click the Collection Item, and click in the states dropdown- the same place you’d set e.g button hover states. Select Even items.
  • Now reverse your flex direction in the styles.

Your odd rows will show e.g. image, then text
Your even rows will reverse that, showing e.g. text then image

1 Like

Brilliant update, thanks for highlighting this.