Turning Desktop layout into Responsive

  • ⌨️ 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.