-2

I have this element (javascript) that overlaps when viewed on mobile, now to get rid of overlapping I want to hide it when viewed on mobile or smaller screens.

here is the code

<script type="text/javascript" src="http://likecontrol.com/ticker2/11031104/custom/3/2/198/bottom/transparent|%23000000|Arial,Arial,Helvetica,sans-serif|1.4em|0.04em|12px|auto|419|0|0|0|center|middle|rectangular|0|%2300ffff" ></script>

then I make it like this

<div class="2leep"><script type="text/javascript" src="http://likecontrol.com/ticker2/11031104/custom/3/2/198/bottom/transparent|%23000000|Arial,Arial,Helvetica,sans-serif|1.4em|0.04em|12px|auto|419|0|0|0|center|middle|rectangular|0|%2300ffff" ></script></div>

and then i put this on css

@media only screen and (max-width: 1026px) {
#2leep {
    display: none;
}}

Can anyone help me figure out how to do this? I only have a few knowledge, a newbie here.

`

  • 1
    That's not how media queries, or CSS, for that matter, work. Items that have `display: none` still exist in the DOM, they're simply hidden. – Etheryte Jan 29 '15 at 19:22
  • 2
    `script` tags aren't visible elements. What is the issue here? – David Jan 29 '15 at 19:22
  • What do you mean by "javascript that overlaps" ? It's never displayed. – Lorenz Meyer Jan 29 '15 at 19:23
  • to give you a better perspective I attached an image below. Here's my site http://wereblog.com screenshot http://wereblog.com/wp-content/uploads/2015/01/ask.jpg – Admeen Chino Jan 29 '15 at 19:41
  • you are writing a `class` in your HTML, and referring to a `id` in your CSS. – Mark Jan 30 '15 at 13:32

1 Answers1

0

You can use modernizr for this, when downloading make sure you select Media Queries.

Then you can do stuff like (only for 767px and up):

if (Modernizr.mq('(min-width: 767px)')) {
   //call external js script
}

You can not set element to display: none; to disable JavaScript call's, display: none only hides te element for the browser, its still in the DOM & will be executed.

Mark
  • 6,762
  • 1
  • 33
  • 50