Card component using HTML, CSS, and Flexbox

Community feedback

• 

  Alex Kim•1,325

  @alex-kim-devPosted over 3 years ago

  Hey Tamera, the cards resize vertically because the height of their content changes, as you resize the window. It's possible to make them of the same height if we apply align-items: stretch to their flex container, but then we should make some other changes:

  /* 750px+ */
  .main-component {
    margin: auto;
    display: flex;
    flex-direction: row; /* row is the default value, can remove this */
    justify-content: center; /* doesn't do anything in this case */
    align-items: stretch; /* change center to stretch, it's the default, so we can remove it too */
    max-width: 920px;
  }
  
  .main-component {
    margin: 0 1.563em;
    height: 100vh; /* to remove, we want the height of our cards to be auto */
  }
  

  The cards are ready, now we need to center the whole component on the screen

  body {
    height: 100vh; /* make body full screen */
    display: flex; /* now the .main-component auto centers, because it has margin: auto */
    margin: 0; /* remove the default margin so we don't get vertical scroll */
  }
  

  That's it, good luck & have fun on the next challenge!

  Marked as helpful

  0
• 

  darryncodes•6,370

  @darryncodesPosted over 3 years ago

  Hi Tamera,

  Good solution, nice and responsive - well done!

  • it might be nice to match the design and add in some button styling / hover affect
  • you might want to swap <div class="main-component"> with <main class="main-component">. This will help clear up one error on the accessibility report. Semantics is really important in your mark up

  All the best!

  Marked as helpful

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  you need to put a controlled height on your card container you currently had 100vh but I put 60vh on it in web dev tools and then one each of your individual cards put a height of 100% on each of them

  thank should get you close

  Marked as helpful

  0