Spacing issues with CMS and columns

Design help CMS
1

Hello everyone,

I’m using the CMS to generate company names, and then using column to separate them (need to use columns as items have to be sorted alphabetically by column, and grid unfortunately sorts by row unless I set direction as column, in which case it auto-generates new columns instead of rows). Some names have spacing issues where they are too close to another name, example screenshot: Screenshot by Lightshot , in this case, Clubehouse and Code Academy are different items alltogether.

Section in discussion is just above the footer here: Team
Read-only link: https://preview.webflow.com/preview/irregular-expressions?utm_medium=preview_link&utm_source=designer&utm_content=irregular-expressions&preview=56b1c3f0a22483308b663de5ac30b177&pageId=616715bb37d50497c7339f65&workflow=preview

2

Hi everyone - any thoughts on this issue, or should I just stick to grid?

3

Here is the list, as a grid, sorted by columns. codepen example. https://codepen.io/wfhow/pen/953687a7b08714d70de052c71eb3f0a2

Is this what you were trying to achieve?

4

Pretty much! But if I use this approach, then whenever the CMS updates with new items, the grid auto-expands by column instead of by row, messing up the layout of the page (or forcing me to go in and add/remove rows manually as required).

5

You can always just use:

.w-dyn-items {
  display:inline-block;
  columns: auto;
  columns: 4;
  }
6

Yes, that’s what I did! But if you go to the page (Team) you’ll notice that some CMS items have weird spacing between them.
For example Clubhouse and Codeacademy are way too close, so are Publicist and Revenue Chemists, which is what lead me to opening this topic, wondering if it’s a CMS issue or otherwise.

7

It’s not happening in my duplicate pen using columns with the same CMS source so the issue is with a CSS setting.

2 Likes
8

Thank you! indeed it was an edge CMS styling causing that issue!