Im trying to make a sidebar with variable width, but for some reason the @media rules are not triggering when changing manually the size of the bar:
In this simplifyed example, the background-color should change when the sidebar width is less than 350px, according to the following rule, but is not working, can't understand why
@media only screen and (max-width: 350px) {
.sidebar {
background-color: aqua;
}
}
Here it is a working code example:
let sidebar = document.querySelector(".sidebar");
let dragholder = document.querySelector(".dragholder");
function onMouseMove(e) {
sidebar.style.cssText = `width: ${ e.pageX }px`;
}
function onMouseDown(e) {
document.addEventListener('mousemove', onMouseMove);
}
function onMouseUp(e) {
document.removeEventListener('mousemove', onMouseMove);
}
dragholder.addEventListener('mousedown', onMouseDown);
dragholder.addEventListener('mouseup', onMouseUp);
document.addEventListener('mouseup', onMouseUp);.sidebar {
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #2D2D30;
width: 450px;
color: #FFF;
padding: 5px;
box-sizing: border-box;
}
.dragholder {
position: absolute;
height: 100vh;
width: 5px;
background: yellow;
right: -5px;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 80px;
}
.dragholder:hover {
cursor: col-resize;
}
@media only screen and (max-width: 350px) {
.sidebar {
background-color: aqua;
}
} <div class="sidebar"> TEST 123
<div class="dragholder"></div>
</div>