Skip to content

Instantly share code, notes, and snippets.

@mouton-rebelle
Last active March 8, 2022 09:27
Show Gist options
  • Select an option

  • Save mouton-rebelle/7f613396f49005ccc19c2907ccf878db to your computer and use it in GitHub Desktop.

Select an option

Save mouton-rebelle/7f613396f49005ccc19c2907ccf878db to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
padding:0;
margin:0;
}
.filters{
display: flex;
flex-wrap: wrap;
}
.filter_area{
background: #FFF;
border-right: 1px solid tomato;
min-width: 300px;
}
@media screen and (min-width: 1200px) {
.filters .filters{
flex-direction: column;
}
.filters .filters .filter_area{
border-right: none;
}
}
@media screen and (max-width: 1200px) {
.filters.filter_area{
min-width: 600px
}
}
<body>
<div class="filters">
<div class="filter_area">Status</div>
<div class="filter_area">Dates</div>
<div class="filter_area">Labels</div>
<div class="filters filter_area">
<div class="filter_area">Sources</div>
<div class="filter_area">Types</div>
</div>
</div>
</body>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment