Sharing some CSS for creating columns in List blocks

Custom Coding
, ,
1

I have a very specific use-case and have enjoyed finding a solution to my own problem, so I am sharing it here.

I am using a List with horizontal cards block, using only the H2 field for displaying text content from Airtable. The site is private and not search engine indexed, so it’s not an issue to use H2 this way for me. Much of the text is just two-word pairs, such as firstname & lastname together on a single line; this creates a long list of text with a lot of whitespace to the right of the text, in the same single container. This wastes a lot of page-space and makes users scroll a lot for long lists.

Using the CSS code here, in the page footer, it is possible to split the container into 2 or 3 equal columns and the text flow top-to-bottom and left-to-right across them:

<style>
.MuiBox-root.css-79elbk > div > div {
  columns: 2 !important;
  -webkit-columns: 2 !important;
  -moz-columns: 2 !important;  
}

#your-ID1-here > section > div > div > div > div > div > div > div > div > div > div > div > div.MuiBox-root.css-79elbk > div > div > div > div > h2 {  
  columns: 2 !important;
  -webkit-columns: 2 !important;
  -moz-columns: 2 !important;  
}

#your-ID2-here > section > div > div > div > div > div > div > div > div > div > div > div > div.MuiBox-root.css-79elbk > div > div > div > div > h2
 {
  columns: 3 !important;
  -webkit-columns: 3 !important;
  -moz-columns: 3 !important;  
}
</style>
1 Like