I'm working on a webpage with a sidebar that needs to adjust its size based on the screen width:
When the screen is below a certain size, I want the sidebar to be short and wide (width of the screen).
When the screen is above a certain size, I need the sidebar to be long and thin (length of the screen).
Note: I created screenshots by manually editing CSS rules.
I've been trying to use Bootstrap and media queries to achieve this by changing the column size and height, but so far, it's not working as expected.
@media screen and (max-width: 300px){
/* Apply only when the screen width is less than 300px */
.sidebar-wrapper{
padding: 7px 0px;
margin: 0px;
background-color: hsl(115,75%,25%);
height: calc(100vh - 5em) /*<-----never applied*/
}
}
@media screen and (min-width: 300px){
/* Don't apply when the screen width is greater than 300px */
.sidebar-wrapper{
padding: 7px 0px;
margin: 0px;
background-color: hsl(115,75%,25%);
}
}
<div class="sidebar-wrapper col-md-2">
<ul class="sidebar-nav">
<li class="sidebar-brand sidebar-item">
<a href="#">
Malmesbury Tandoori
</a>
</li>
{%for section in foodcategory_list%}
<li class = "sidebar-item">
<a href="#{{section.name}}">{{section.name}}</a>
</li>
{%endfor%}
</ul>
</div>
<div class = "menu-wrapper col-md-10">
<h2>Menu</h2>
<table>
.....table stuff........
</table>
</div>
I've looked for tutorials and explanations but can't seem to fix why my rules are not being applied. Can someone offer some guidance?