3-column preview card component

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Renee Smith, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To bring your page closer to the example layout, we can change the background color:

  body {
      background-color: #F2F2F2;
  }
  

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  0

  ---

  

  Renee Smith•190

  @RSmith484Posted almost 2 years ago

  @AdrianoEscarabote thank so much! Was trying to figure out that screen centering for ages!

  1

  

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  @RSmith484 no problem, keep coding!

  0
• 

  Sean Gray•690

  @seangray-devPosted almost 2 years ago

  Hey Renee, I came up with a solution for your question. You could add this to each of your columns:

  column-1, column-2, column-3 {
  display: flex; 
  flex-direction: column; 
  justify-content: space-between;
  }
  

  You could also add a helper class to each of the divs instead of having to repeat yourself.

  Hope this helps! Keep it up! 👍😁

  0

  ---

  

  Renee Smith•190

  @RSmith484Posted almost 2 years ago

  @seangray-dev Thanks so much!

  1