I'm trying to create a list with 2 columns, and I want it to switch to 3 columns when the browser window is wide enough (for example, on a 23 inch monitor). Can this be achieved using CSS or any other method?
Here is my current CSS:
.search-results {
padding: 10px 0 20px 20px;
border: 3px solid black;
height: 100%;
}
ul{
width:100%;
list-style-type: none;
height: 100%;
background-color: pink;
}
li{
background:green;
float:left;
height:250px;
margin:0 10px 10px 0;
width:45%;
}
li:nth-child(even){
margin-right:0;
}
And here is the HTML structure:
<div class="search-results">
<ul>
@foreach (var gift in Model)
{
<li>
@gift.Name
</li>
}
</ul>
</div>