Responsive 3-Column Card Component Using CSS and SCSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Nenkimwa, Congratulations on completing this challenge!

  the solution is perfect overall, there's only one problem with the alignment that can't be seen in the desktop version but the mobile yes, its not fully aligned. To fix that remove the alignment using position and align it with min-height: 100vh (to make sure it will be ever aligned vertically and centered) with flexbox.

  REMOVE THIS ALIGNMENT

  body .maincontainer {
      /* position: absolute; */
      /* top: 50%; */
      /* left: 50%; */
      /* transform: translate(-50%, -50%); */
      display: flex;
      flex-direction: row;
  }
  

  ALIGN WITH FLEX AND MIN-HEIGHT

  The step by step to do this alignment using flexbox and min-height is, first you add min-height: 100vh to the body and make it display 100% of the viewport height (this makes the container align to the height size that's now 100% of the viewport height/screen size) and then add display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      min-height: 100vh;
      background-color: hsl(0deg, 0%, 95%);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Nenkimwa Kangdim•90

  @Fanuel369Posted about 2 years ago

  @correlucas Thank you for your feedback

  0