Media query min-width with Javascript code

Question

Currently I am having an issue on my website (http://www.engagearcade.com) where the media query (min-width) does not remove a Javascript code that is within the said div. Here is the html:

<div id="advertisementslot1">

<script language="javascript" type="text/javascript" charset="utf-8">
(I can't show what's within here)
</script>
</div>

<div id="advertisementslot2">

<script language="javascript" type="text/javascript" charset="utf-8">
(I can't show what's within here)
</script>
</div>

Here is the 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;

}

}

The code does in a sense work, however it only removes the actual div. The script (advertisements) move to the top left hand side of the corner and are not hidden. How can I fix this?

Cheers.

Answer 1

You should define your containers outside the media query, and hide them if the width don't allow them to show.

#advertisementslot1, #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;
}

#advertisementslot1 {
    top: 475px;
}
#advertisementslot2 {
    top: 1095px;
}


@media only screen and (max-width: 1151px) {
    #advertisementslot1, #advertisementslot2 {
       display: none;
    }
}