JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mnav-ul" style="">
<li class="mnav-ul-li"><a href="#gg">Option 3</a></li>
</ul>

<div id="currentMedia">gggggggggg</div>

CSS

@media all and (max-width: 480px) {
#currentMedia {
width: 480px;
border: solid 1px red; 
}
}

@media all and (min-width: 481px) {
#currentMedia {
width: 481px;
border: solid 1px green; 
}
}

JavaScript

var adjust_size = function() {
//alert( "resized or page first load" );

if (parseInt($("#currentMedia").css("width"), 10) <= 480) {
alert( "max width is less than or equals to 480" );

$(document).on('click', '.mnav-ul-li a', function(){
alert( 'clicked1 ' + parseInt($("#currentMedia").css("width"), 10) );
});
}
else{ 
alert( "else" );
}//else

};
adjust_size();
$(window).resize(adjust_size);