在不同的屏幕尺寸上隐藏<li> </li>

Question

我有一个快速响应的CSS问题：我想隐藏一个<li>项目，当屏幕大小是任何东西但移动时（当你不在移动时显示登录按钮，但链接应显示在当你在移动中。）

<div class="header-menu"><ul class="menu">
 <li><a href="index.php">Låna pengar</a></li>
 <li><a href="sa_fungerar_det.html">Så fungerar det</a></li>
 <li><a href="kundservice.php">Kundservice</a></li>
 <li><a href="om_oss.html">Om oss</a></li>
 <li id="loginLink"><a href="index-login.php">Logga In</a></li>
</ul></div>

请注意ID为“loginLink”的最后一项。那是我想隐藏的那个。到目前为止，在CSS中，除了360px之外，我正在为所有@media做以下事情：

@media only screen and (max-width:940px) {
 #loginLink { display: none; }
 // a lot of other css here
}

但它不会开火？我错过了什么？