⌨️ Turning a table layout into responsive

Link: https://codepen.io/makzan/pen/gEZVEN

/* CSS to make table responsive */
*{
  box-sizing: border-box;
}
table {
  max-width: 100%;
  width: 100%;
}
table.container {
  max-width: 800px;
  margin: 0 auto;
}
.menu {
  overflow: auto;
}
.menu td {
  display: block;
  float: left;
  width: 33.333%;
}
.menu td a {
  display: block;
}

.row {
  width: 100%;
}
.row td{
  display: block;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .row td {
    display: table-cell;
    width: auto;
  }
  .row td.sidebar {
    width: 20%;
  }

  .menu td {
    display: table-cell;
    float: none;
    width: inherit;
  }
}

Updated: less than a minute ago Print


πŸ’¬ Discussion

no comments yet.

Please login to chat.