Is there a way to refresh CSS styles when the window width changes?
I attempted this method, but unfortunately it did not work as expected. A simple refresh (F5) helps to rectify the CSS tags.
jQuery(function($){
var windowWidth = $(window).width();
var trigger = 1024;
if (windowWidth < trigger) var smaller = true;
else var bigger = true;
$(window).resize(function() {
if(windowWidth != $(window).width() &&
( ( smaller == true && $(window).width() > trigger ) ||
( bigger == true && $(window).width() < trigger )
)
){
window.location.reload();
return;
}
});
});
Sample CSS Code
.example {
display: block;
padding: 12px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
@media screen and (min-width: 1024px) {
.example {
left: 80px;
top: 80px;
width: auto;
padding: 8px;
}
}
The original CSS styles were altered by some JavaScript, hence I aim to reload the original ones when the window size shifts from either being smaller or larger than 1024px.