Breakpoints difference
Investigate weather there is difference in breakpoint detection between js and css
by AntowaKartowa
HTML
<div class="container">
<div class="inner">
Some Text
</div>
</div>
CSS
.container {
position: relative;
height: 10000px;
width: 100%;
padding: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
padding: 100px;
background-color: #fff;
color: #000;
font-weight: 800;
text-align: center;
}
.color-white {
color: #fff;
}
@media (min-width: 600px) {
.inner {
background-color: #000;
}
}
JavaScript
var inner = document.body.querySelector(".inner");
window.onresize = function(e) {
var check = window.innerWidth > 599;
if (check) {
inner.classList.add("color-white");
} else {
inner.classList.remove("color-white");
}
};