Streaming live at 10am (PST)

Alternating dynamic content


#1

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;
}


Designing Fashion Collection Page With CMS
Alternating Layouts within Collection Lists
#2

share link not working


#3

Added thanks so much for bringing this to my attention.


#4

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


#5

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."


#6

There is no product-container on your home page.


#7

So does that code work to alternate dynamic content?

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


#8

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


#9

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