How to reduce gap between list cards

0
I have a list view with cards inside it as below, I am using class "lv-col-lg-2" on this list. But it seems there is a larger gap between flex columns. How can this be reduced/removed?
asked
1 answers
0

That is hard to say without seeing the DOM and/or the properties of "lv-col-lg-2". Based on the flex property, a couple of things might be the case:

  • Gap property is set too large.
  • Justify content is set to space-between, space-around or space-evenly
  • Flex-grow is enabled. This seems to be a bit of a stretch.

I would very much recommend reading trough this handy guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Just a heads up, you're working with a list view. This means you need travers down to the correct DOM-level in order to apply the styling (.mx-listview > ul).

 

You can also check out my mFlex module. This will give you those flex options in containers, listviews and templategrids. https://marketplace.mendix.com/link/component/205993

 

Good luck!

 

Maurits

answered