I'm currently facing an issue with my website () where the media query (min-width) is not effectively removing a JavaScript code within a specific div. The HTML structure in question is as follows:
<div id="advertisementslot1">
<script language="javascript" type="text/javascript" charset="utf-8">
(Contents hidden)
</script>
</div>
<div id="advertisementslot2">
<script language="javascript" type="text/javascript" charset="utf-8">
(Contents hidden)
</script>
</div>
Below is the corresponding CSS:
@media (min-width:1151px){
#advertisementslot1 {
box-shadow: 0px 0px 0px 4px rgba (255,255,0,0.9);
border-radius:16px;
opacity:0.8;
width:160;
height:600px;
position:absolute;
left:30px;
top: 475px;
}
#advertisementslot2 {
box-shadow: 0px 0px 0px 4px rgba (255,255,0,0.9);
border-radius:16px;
opacity:0.8;
width:160;
height:600px;
position:absolute;
right:30px;
top: 475px;
}
}
While the code functions partially by removing the div, the scripts (advertisements) remain visible at the top left corner and are not hidden. Any suggestions on how to resolve this issue would be greatly appreciated.
Thanks.