Streaming live at 10am (PST)

Collection list is ordering from right to left?


#1

Hi there,

I cannot figure out how to rearrange my collection list so that it reads from left to right.

Right now the page is populating from right to left on mobile and desktop. I have no idea how to fix that.

Please help; thank you!

Regards,
Silas B.


Here’s my site’s read-only preview link: https://preview.webflow.com/preview/nexient?utm_source=nexient&preview=5ea6af4db245b4c82159e5ad77ccdaed
Here’s my site’s live link to the page where this happens: https://nexient.com/news & https://www.nexient.com/insights


#2

Hi @Silas, thanks for creating the post. I tried to take a look at the site via the read-only link, but it seems that is no longer valid, can you please generate a new read-only link:

Let me know when done and I will be happy to take a look further.

Thanks in advance


#3

Option I: Collection list with flexbox

flex-direction: Set the direction of the flexible items inside the <div> element in reverse order. Read more

Follow this tutorial:

Next go to - dynamic-list element (Your "flex container") - and check “reverse layout” .

image

flex-direction: row-reverse; in this case (for rows).

Webflow docs (under “Reverse layout”):


Option II: By Collection list layout setting:

"No way" by the UI (See this wishlist topic) -
but one line of custom css should solve this (Change the float from right to left)

Read more her:


#4

Thank you! The colleciton list isn’t made in a flexbox, but, worst case I could put it inside of one and reverse the reversed layout.

In any case: https://preview.webflow.com/preview/nexient?utm_source=nexient&preview=ac7cc537731785f10007c3a99e0c3069

That is my read-only link. Please let me know what you find; thank you!

Regards,
Silas Bush


#5

Hi @silas thank you so much for sharing this!

I see that you have your collection items to Float: right at this time.

Could you please try setting them to float left instead?
CloudApp

You can also change the sort order settings in the setting panel with a collection list selected:
CloudApp

Here’s an in depth guide to sorting items: https://university.webflow.com/article/collection-list#sort-order

Please let me know if this is helpful or if you have any additional questions.

I’m happy to help further!


#6

Oh! I see. We have more than one person working on the same site. Sometimes this results in sudden changes that I don’t have context how to fix because I didn’t work on that part of the site.

Thank you! This worked.

Regards,
Silas B.