Space between list columns

Hi guys, an easy one:

How to put space between list columns while mantening the 3 columns view. Which means that the column sizes will have to be reduced proportionately by the increment of the space added in between.

I want to have horizontal space bewteen the coments. Pading and border doesn’t work.


Hi Michael,

Try using

.kn-list-item-container {
border: 2px solid #2D6BB3;
background: #ffffff;
text-align: center;
margin-top: 10px;
margin-left: 15px !important;

margin-left did the trick for me…

I have written a couple of articles on styling Knack apps (this is from part 2):

Hope this helps!!


Hi Julian,

Yes I tried that a time ago and probably looking through your styling examples.

But the 3 columns view is not respected. Meaning the size of the comments should be proportionately reduced to have 3 comments on the same line.
No idea how to do that.

So nobody knows how to do that? Can the Knack people help here?

I wasn’t sure what you meant to be honest!

I haven’t had a problem with the 3 columns not showing unless they collapse for a small screen.

Interesting. Indeed I have a 13’ screen laptop, but even when I zoom it does not include the 3 column.

The margin left increases the total size of the view. I don’t know how to decrease proportionately the size of each column. If I put a fix value then the column width will not be responsive on movil.

hey! width: auto; does make the 3 columns respect the total size of the view but I want the column with the same size.

width: 30%; works but is not responsive on movil.

So nobody knows how to do that. It shouldn’t be that dificult.