Streaming live at 10am (PST)

Help create Alternating "Chess-like" Collection-list Grid using Custom CSS


#1

Hello.
I would like to hear if anyone knows how to replicate the following.

I want to create a collection list with blog post, which is displayed with and image next to a block with a summary…

The problem is, i want the order of the image and summary to flip when the row breaks on a smaller screen. This way i’ll get a “Chess-like” pattern of blog posts.

It’s pretty hard to describe with text, so i hope this screenshot helps.

Heres a “fake” demo of what im trying to do, it wont work for responsiveness: Read-Only

I’ve tryed using css pseudo class: nth-child(even), but that does not seem to be supported.

I hope there’s someone who has more experience with webflow than me, who has a solution.

Best Regards.


#2

You’ll need a complex CSS selector to select ranges, something like this to select groups of four items:

.w-dyn-item:nth-child(n+5):nth-child(-n+8),  /* Select second group of four items */
.w-dyn-item:nth-child(n+13):nth-child(-n+16) /* Select fourth group of four items */

The blue highlight is showing what is being targeted by the above selector (developer tools).

This assumes you have up to 20 displayed items. You can add more to the list above,

OR you can also use this for more than 20 items:

.w-dyn-item:nth-child(8n + 5),
.w-dyn-item:nth-child(8n + 6),
.w-dyn-item:nth-child(8n + 7),
.w-dyn-item:nth-child(8n + 8)

This selects every 5th, 6th, 7th, 8th item for every group of 8 (8n).


#3

Then since you already have flex applied to each item, simply apply row-reverse:

.w-dyn-item:nth-child(n+5):nth-child(-n+8),
.w-dyn-item:nth-child(n+13):nth-child(-n+16) {
    flex-direction: row-reverse;
}

Hint: If you paste custom CSS in an Embed Code component, you can preview the style within the designer itself without having to publish.


#4

Then, as you are using a different layout on mobile (<= 767px), this is currently what we have:

So, you’ll need to only apply the previous step to desktop/tablet only:

@media screen and (min-width: 768px) {
    .w-dyn-item:nth-child(n+5):nth-child(-n+8),
    .w-dyn-item:nth-child(n+13):nth-child(-n+16) {
        flex-direction: row-reverse;
    }
}

And apply a different style to mobile. This is simpler as it’s only a single column, so go ahead and use even on the items:

@media screen and (max-width: 767px) {
    .w-dyn-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}


#5

Thanks slot samliew, i attempted using nth-child yesterday, but it didnt work. I Guess my formatting must have had some kind of error.

I Guess i’ll give it a go again today, and see what happens. I’ll use Media queries to controle when it should reverse-flex.

I’m aware that the custom code only applies to the Published page.

Thanks for the very detalied answer, i’ll return and add my result.


#6

If the custom code component only contains style tags and CSS, it WILL apply within the designer. This is a very useful tip.


#7

It is working!!! Thanks samliew!!


#8

No problem. I hope you can understand how to put something like that together in the future from my explanation, and not just copy the code without knowing how it works.


#9

I know how it works, but to be sure i just went and read a bit om w3schools. It’s working now,

It seems that All i did wrong yesterday was that i used and incorrect CSS selector.

Your tip with the embedded code is great, i didn’t know that i could work live with the CSS that way.

I’m so pumped from this, great way to start a new week :grin::grin: