Frontend Mentor | 3-column preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Israel John, I think it looks good on the whole!

  One comment I have is, I see that you're trying to center your component using flexbox, but things are still a bit off centered where the footer and the component are on the same row. What happened is, they're taking the default flex direction, which is row, and all you need to do to fix that is to change the flex direction.

  Here's what I'd do:

  1. Have the flex-direction as column so that the component and the footer can be stacked as 1 column.
  2. Set either flexbox or grid in the component to make it centered, and add flex: 1 so that the component can take up the entire space.
  3. Remove the padding on the footer, as it's always best to position elements using flex and grid properties instead of setting huge paddings and margins, which could give you issues when you go to a smaller screen.

  Everything looks like this:

  body {
     // add these lines
     flex-direction: column;
     justify-content: center;
  }
  
  .container {
     // add these lines
     flex: 1;
     display: flex;
     align-items: center;
  }
  
  .attribution {
     padding-top: 500px; // remove this
  }
  
  

  I would also add some margin between the elements in the box so that they look a bit more like the design; you can try putting a 1.5rem space between them and see. Great job on the whole!

  0

  ---

  

  Israel John•150

  @IsraeljonPosted over 2 years ago

  Thanks Elaine for your observation I appreciate

  0