You can easily add these AtlasUi classes for that
lv-col-xs-6
where xs is the responsive target size
and 6 is the number of bootstrap columns for each element (i.e. 6/12 = 50%)
regards, Fabian
Im sure this has been asked before, so heres what you’re going to want to do.
put this class on your list view “card-container-fluid4”
and add this to your sass.
.card-container-fluid4 ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
li.mx-listview-item{
width:23.5%;
margin-right: 1.5%;
}
}
it turns the listview into a “fluid wrapper” and will give your listview-items a set width, so that they will slide in next to each other.
(also work nice when creating a homepage with different cards with conditional visiablity per user that slides in next to each other)
by default a listview only offers one column.
You could use the TemplateGrid instead in this widget you can set the number of columns, though you will get paging buttons in the TemplateGrid instead of the “load more” functionality you get in a ListView.
You need to change the sizing of the elements in the list by css styling. You can do this directly in the css option on the list element or by creating a css class in less and use them in the list object.
A listview always displays the results in this way. If you want to have some results side by side you may want to use a templategrid.
You can add the following css to your listview:
display: block;
width: 50%;
float: left;
Or make a class using scss and add the class to the listview ofcourse.