Community forum for knowledge and support

Updated 2 months ago

Flipping image and text collection items in cms collections

At a glance

The community member was trying to figure out how to flip the order of image and text collection items in a blog listing, every other element. They were looking for a "one click solution" in the Flexbox settings, but couldn't find it. The solution provided in the comments was to use custom CSS to reverse the flex-direction of the odd-numbered items, specifically .customer-article-list .w-dyn-item:nth-child(odd) .customer-article_content { flex-direction: row-reverse; }. The community members confirmed this custom CSS solution worked well.

I understand the odd and even logic with cms collections however I'm a bit confused how to flip image + text collection items by every second element. I think there was a one click solution for flexbox to just flip the order but I can't find it on the new UI and can't do the same effect with first and last settings. Because when I edit the css properties of odd or even—I can do that directly on the collection list item.

This is a blog listing
(Sorry I needed to cover some parts of the text and image)

Á
M
4 comments

Funny but always when I finally decide to ask a question I figure it out in the next 30 minutes 😄

I used a custom code, attached the structure I have in the image

.customer-article-list .w-dyn-item:nth-child(odd) .customer-article_content {
    flex-direction: row-reverse; 
}

@Ádám Simon yep this was going to be my suggestion - little custom CSS.

Worked like charm. I'll start to put together a notion for these goodies.

Add a reply
Sign up and join the conversation on Slack