CMS Collection Item layout

Design help General
1

Hi,
I have a small problem with the layout of my customer feedback CMS collection.
I want to make the 5 Star review on the second row of my customer feedback to be placed higher up the page, please see the diagram to understand:

41
411439×864 187 KB

Thanks for your help!
Matt

Here is my site Read-Only: LINK

1 Like
2

Hey @MatthewSpiegelhalter

You want the sort order to be largest to smallest? Easy! See here > https://www.loom.com/share/79001f941e6a4c9b90fc0365b6cc3e08

Piter :webflow_heart:

3

Thanks @PeterDimitrov for your reply,
I have done what you did in the video and it doesn’t seem to work in all cases. Secondly I would like to sort by new for all the reviews so that they will be in chronological order. Do you know any other work arounds?

4

Can you be more specific, like what cases that an integer sort is not working for you?

Then you would need to add an additional sort. Published date could be used for example.

5

This is an example of the problem occuring using the same settings specified:19

30
301440×900 279 KB

I need to solve the problem by sizing the collection items properly, not by ordering them from biggest → smallest, as I would like to have them ordered by date added not size.

6

I believe this is my problem shown in a two column view:

13
131134×641 158 KB

is there a way of reducing the width of ‘Long example’ so that it can move up and not overlap with ‘John Doe’? i have tried using margins and changing the width but no success.

7

This does not create a masonry layout since you are using a grid. The video does show you how to clean up the layout though where at least each row in the grid is consistent. You could always set a cards min-height to a value and set the text to overflows scroll.

You could also use a masonry type layout (puzzle). I would mention that I think most users are going to be mobile , so my preference is design for that. Hope this helps you on your way. :slight_smile:

CloudApp

8

Thank you for the help @webdev ! I managed to make a masonry layout using text columns if you are interested, have a look at the link.

1 Like
9

I was planning on sending you a link to that topic but I see you located it. Glad you resolved your issue!

1 Like
10

Happy to hear! Closing the topic :webflow_heart: