Hiding and showing element based on screen size
<p>I'm trying to make button that will hide and show menu when web page is being displayed on smaller screens. I want to keep the whole menu when the display is wider than 640px. I'm only allowed to use CSS and JavaScript.</p>

<p>Here is the JS function I wrote:</p>

<pre><code>var b = document.getElementById ("menu-button");
b.addEventListener("click", showMenu, false);
var i = 0;
function showMenu () {
    i++;
    if(i % 2 == 1)
        document.getElementById("menu").style.display = "block";
    else
        document.getElementById("menu").style.display = "none";
}
</code></pre>

<p>It is working when displaying the page on smaller screen. </p>

<p>When I click the button to hide the menu (that changes "menu" display to <code>none</code>) and then increase the size of the page, my menu does not appear when the screen becomes larger than 640px. </p>

<p>This media media query does not do the job: </p>

<pre><code>@media screen and (min-width:640px) {
    #menu {
        display: block;
    }
}
</code></pre>