Any iniative to the css function @media screen and (max-width: 768px) in jquery?

Question

does any initiative to the css function @media screen and (max-width: 768px) exists? I made a responsive nav. But when I switch the display of an element from none to block on the mobile screen size, It's also appears on the initial screen size. Any way to avoid this?

Answer 1

Perhaps you haven't declared the CSS rules in the right order, but in any case you haven't provided any code, so we wouldn't know.

You have to make the following slight adjustment - @media only screen and (max-width: 768px) . Here's a code example and a JS Fiddle below - try resizing the browser window and you will see that the CSS rules will apply once you have resized.

<div id="myElement">
  <p>
    hello
  </p>
</div>

--

#myElement {
   display: none; 
}

@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
  #myElement {
    display: block;
  }
}

JS Fiddle example: https://jsfiddle.net/1dqxkgyt/3/