Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<title>Flexi list</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
#container{
padding: 3px;
color: #000;
font-family: sans-serif;
font-size: 15px;
width: 500px;
background: #eee;
border: 1px solid #a9a9a9;
}
#container > ul{
padding: 0;
margin: 0;
}
#container > ul li{
list-style-type: none;
display: inline;
}
@media(min-width: 1159px) {
#container > ul li{
display: inline-block;
width: 90px;
padding-right: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
}
@media(max-width:1158px) {
#container{
width: 200px;
background: #ddd;
border: 1px solid #f00;
}
#container > ul li:after{
content: ', ';
}
}
@media(max-width:1255px) and (min-width:1159px) {
#container{
width: 350px;
background: #ddd;
border: 1px solid #0f0;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chhattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal Pradesh</li>
<li>Jammu and Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Tripura</li>
<li>Uttar Pradesh</li>
<li>Uttarakhand</li>
<li>West Bengal</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.