Responsive card component

Community feedback

• 

  romila•3,550

  @romila2003Posted over 2 years ago

  Hi Kemcy,

  Congratulations 🎉 for completing your second challenge, it was a great attempt but there was a number of issues I want to address:

  1. Regarding the responsiveness of your card, it looks great however the card between 376px to 600px, is quite high up and covers the whole width. A key solution for this problem, would be to take a mobile-first approach and change the elements as you increase the screen size since this would help you and is better in terms of best practices. Therefore, instead of giving the container a media only screen and (max-width: 375px) { ... }, you should use the min-width property instead, when you have reached 600px or 700px e.g. media screen and (min-width: 600px) { ... }
  2. The button requires the type property e.g. <button type="submit" class="btn"></button>
  3. The word 'PERFUME' should have the letter-spacing property e.g. letter-spacing: 0.4em;
  4. The description has the wrong font-family.
  5. Also, you should use the flex property within the body to align the card in the middle e.g.

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

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0