3 Column Preview Card Component

Community feedback

• 

  Reza Sajjadian•290

  @reza-sjdnPosted over 1 year ago

  Hi @DezzaAnnePeregrina, Good Job! Overall your solution is great but I have some small fixes to make your solution more responsive.

  In CSS file:

  1. In selector .card, set max-width: 900px;.
  2. In selector .card__item, instead of width: 19rem; type flex: 1;.
  3. In @media, set the break-point at max-width: 687px.
  4. and finally in @media in selector .card, set the margin: 2rem; 3.5rem is much. besides, if you set border-radius: 10px; , it would be more beautiful!

  I hope It will help you. GOOD LUCK : )

  Marked as helpful

  0

  ---

  

  Dezza Anne•250

  @DezzaAnnePeregrinaPosted over 1 year ago

  @reza-sjdn thanks for the feedback 🙌🏻

  0
• 

  P

  Lo-Deck•2,650

  @Lo-DeckPosted over 1 year ago

  Hi, well done for this challenge.

  In the section tag, it's better to not repeat <h1> tag. Here a link : Mozilla mdn.

  And you can change the <border> tag by <outline> to cancel the grow-up effect when put your cursor on the button.

  .one .card__link:hover {
  background-color: var(--clr-bright-orange);
  outline: 1px solid var(--clr-very-light-gray);
  color: var(--clr-transparent-white);
  }
  

  Hope to be helpful.

  Marked as helpful

  0

  ---

  

  Dezza Anne•250

  @DezzaAnnePeregrinaPosted over 1 year ago

  @Lo-Deck Thanks for the feedback 🙌🏻

  0