How to reduce gap between list cards

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?
1 answers

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-betweenspace-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:


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.


Good luck!