@media
никак, но есть другие решения:@element queries
пока не видать, так что не стоит ожидать их появления в CSS в ближайшем будущем. <div id="sidebar" class="nav-collapse hide-left-bar">
...
</div>
<section id="main-content" class="merge-left">
...
</section>
#main-content {
margin-left: 240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.merge-left {
margin-left: 0px !important;
}
#sidebar {
width: 240px;
height: 100%;
position: fixed;
background: #32323a;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hide-left-bar {
margin-left: -240px !important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.main
{
height: 300px;
width: 100%;
background-color: #c6c6c6;
}
.top, .top::after
{
display: block;
width: 200px;
height: 200px;
}
.top
{
margin: 0 auto;
position: relative;
background-color: #6a56ff;
top: 50px;
left: 50px;
}
.top::after
{
content: '';
position: absolute;
background-color: #ffcb56;
top: -50px;
left: -50px;
}
<meta name="viewport" content="width=device-width, initial-scale=0.8">
$(this).next().show();
и id должны быть уникальными (используйте классы).font-size
.