CSS and setting "display" with media queries - css

Question

So suppose I have the following code:
td.topnav_link {
padding: 5px 5px 5px 5px;
background-color: #5babd7;
border: 1px solid #578baf;
cursor: default;
}
#media screen and (max-width: 500px) {
#id_topnav_link_menu.topnav_link {
display: block;
}
#id_topnav_link_about.topnav_link {
display: hidden;
}
#id_topnav_link_contact.topnav_link {
display: hidden;
}
}
and
<td class="topnav_link" id="id_topnav_link_contact">
contact
</td>
should the "about" and "contact" not become hidden when I resize the browser down? (It does not for me when testing in a variety of browsers)
(Note: Yes, I realize I am using a td where I should not, but I am slowly converting an old layout of mine to be more CSS and more mobile)

Answer 1

There's no hidden value for display. It should be none. But as it is a cell, you should use visibility, which will hide the cell, but the space will still remain there:
#media screen and (max-width: 500px) {
#id_topnav_link_menu.topnav_link {
display: block;
}
#id_topnav_link_about.topnav_link {
visbility: hidden
}
#id_topnav_link_contact.topnav_link {
visbility: hidden
}
}
Here's a list of possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/display