Responsive 3-column Preview - HTML and CSS

Community feedback

• 

  T

  Grace•31,210

  @grace-snowPosted over 3 years ago

  Hey,

  Take a look at these changes I just made in browser dev tools. Go through them one-by-one and I think it will help you learn a few tips for your layout 🙂

  
  /* style.css | https://mit-igu.github.io/3-column-preview/style.css */
  
  body {
    /* font-size: 0.9375; */
    font-size: 0.9375rem;
  }
  
  @media screen and (min-width: 500px) {
    .holder {
      /* max-width: 1000px; */
      /* max-height: 500px; */
      max-width: 800px;
    }
    .area {
      /* min-width: 300px; */
    }
    .learn {
      /* position: absolute; */
      /* bottom: 70px; */
    }
  }
  
  .area {
    /* position: relative; */
    /* width: 100%; */
    /* min-height: 70vh; */
    display: flex;
    flex-direction: column;
  }
  
  .holder {
    /* width: 100%; */
    /* align-items: center; */
    align-items: stretch;
    max-width: 300px;
    margin: auto;
  }
  
  .learn {
    /* width: 150px; */
    note: these elements need focus and hover styles;
    margin-top: auto;
  }
  
  .area-text {
    /* margin-bottom: 30px; */
    margin-bottom: 5rem;
  }
  
  .area {
    flex: 33%;
  }
  
  

  0