CSS and setting "display" with media queries

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">
<a href="/contact/">contact</a>
</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)

@Itay Itai: Well you can use display: none on table cells, but instead of block it should be table-cell. — BoltClock
– BoltClock, Commented Aug 14, 2013 at 9:57
You should definitely avoid tables for layout on mobile sites. Mobile browsers have drastically different rules for handling tables. — Anthony
– Anthony, Commented Aug 14, 2013 at 10:03

pzin · Accepted Answer · 2013-08-14 09:56:18Z

3

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

answered Aug 14, 2013 at 9:56

pzin

4,2482 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Itay Over a year ago

Sorry for mistaking you, as BoltClock♦ has told me, you can give it display: none but display: block should be replaced with display: table-cell.

pzin Over a year ago

I think if you set display: block on a cell it will be computed as table-cell, like inline on float is computed as block anyway.

Tom Over a year ago

My problem has been solved. Can't believe I made that error :(

Collectives™ on Stack Overflow

CSS and setting "display" with media queries

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related