3-column preview card component

Community feedback

• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  1. To complete the comment of Hyron Gennike, what he is suggesting you to do is to use CSS Flexbox, which is an efficient way to layout, align, and distribute space among elements within your document.

  The code he gave allow the body to be on "Flexbox mode", justify-content will center your content in the main axis (horizontally), while align-items will center your content in the secondary axis (vertically). The min-height: 100vh is here to take all the height of the page.

  Here's a cheatsheet on how to use flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Also, here's a little mini game which is very helpful to learn how to use flexbox easily : https://flexboxfroggy.com

  2. For your first question, you did use CSS variable, which is a good design to follow, I like it !

  I see in your css you used a lot of display:flex without really using the power of flexbox, I really recommend you to watch the link I gave you above to understand how flexbox really work.

  You could simplify a little your css, since you made some repetition, here's an improvement :

  a:hover{
      font-weight: 400;
      border: solid var(--Transparent-white) 2px;
      color: var(--Transparent-white);
  }
  
  .plan-1 a:hover{
      background-color: var(--Bright-orange);
  }
  
  .plan-2 a:hover{
      background-color: var(--Dark-cyan);
  }
  
  .plan-3 a:hover{
      background-color: var(--Very-dark-cyan);
  }
  
  

  Same thing on the media querry part, you did this :

  .container{
          margin-top: auto;
          margin-bottom: auto;
          margin: auto;
          flex-direction: row;
          max-width: 1440px;
          max-width: 78%;
      }
  

  You can remove margin-top and margin-bottom since you already included a margin: auto, which would give you :

  .container{
          margin: auto;
          flex-direction: row;
          max-width: 1440px;
          max-width: 78%;
      }
  

  Congratulation for finishing the challenge, keep going, and I hope my comment will be helpful to you !

  Marked as helpful

  0

  ---

  

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  @UrbanskiDev Thank you so much for the explanation! I will definitely check out the links about flexbox. I will also follow your suggestion to simplify my code. Thanks again!😊

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  ** Good job on the challenge** you can add the following to center the columns.

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Marked as helpful

  0

  ---

  

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  @hyrongennike It works! Thanks for the suggestion😀

  0