Search code examples
htmlcssmedia-queriesresponsive

Adapting a table to be responsive

I am working on a very simple project for freeCodeCamp. I have a table on the site but am having issues getting it to adapt to mobile devices. I have used a media query to try and change its appearence for 400px or less to no avail.

You can see the whole project here.

But my question is, why does my table not adapt when using this snippet? As far as I understand it should be no wider than 400px.

@media (max-width: 400px){/*Trying to adapt to mobile*/
  #tribute-info table{
    display: fixed;
    max-width: 400px;
    height: auto;
    margin: auto;
  }
}
Solution

  • My guess is: Your table content exceeds 400px, so the browser can't cap the table at 400px max-size. If you set the font-size to 2px on your table-content, you'll see it works just fine.