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.

you need to check how the advertisement markup generated via script is made and where it is placed — Fabrizio Calderan
– Fabrizio Calderan, Commented Mar 26, 2014 at 12:47
There is no placements within the script, which is why it moves to the top left without the div. Adding the media query makes only the div disappear when the user has a width below 1151. — user3227878
– user3227878, Commented Mar 26, 2014 at 12:51

gramgram · Accepted Answer · 2014-03-26 12:58:24Z

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;
    }
}

answered Mar 26, 2014 at 12:58

gramgram

5654 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3227878 Over a year ago

Thanks a lot, the placements were slightly off (I had one with right:30px; and one with left:30px; + both were meant to be 475px) but after fixing that up it worked perfectly! Cheers!

Collectives™ on Stack Overflow

Media query min-width with Javascript code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related