Clean 3 Column Custom Field Lists xenforo 2

[AdminAdmin is verified member.]

Want clean 1-3 columns for different devices?​

Display one on smaller devices:​

Two on medium:​

And three on large:​

Add this code to extra.less​

.listInline--customField
{
@media only screen and (max-width: 600px) {
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
@media only screen and (min-width: 600px) {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
@media only screen and (min-width: 1050px) {
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}
}

Note: Play with the min-width to make the columns fit your site. What I mean by that is drag them around and see if you have an item that is too long that breaks into 2 lines as opposed to staying in 1; you will have to find that point so it stays in a straight line. If your lists tend to be larger than the examples above, you might only want 1 or 2 columns—adjust as required to look good on your site.