Frontend Mentor - Product preview card component

Community feedback

• 

  Nelson Nzewi•270

  @nzewiPosted about 2 years ago

  Nice work completing this challenge Kelvin, you did very well

  Here are my suggestions:

  1.Your implementation of relative units were okay, however, you did not need to change the font size of the HTML element more than once.

  2.Determining which out of flexbox or grid is subjective, any of them will work. Most times, we use grid for layouts and flexbox for smaller components like this.

  3.You wrote good flexbox. You can use the max-width property instead of width, this makes your components more responsive. You can use the gap property to space flex-items instead of using margin too.

  4.Take a look at the report from Frontend Mentor, you have some HTML issues there.

  5.If you make the changes I suggest below, you can achieve the same design.

  6.Don't style your HTML elements with an ID as you did on the #preview-card

  In your main syling, some properties are redundant. The code below works as well.

  main {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: hsl(30, 38%, 92%);
      min-height: 100vh;
  }
  

  In your preview-card media query, this would work better

  @media only screen and (max-width: 375px)
  #preview-card {
      flex-direction: column;
      max-width: 90%;
  }
  

  In the code below, never leave any content hanging, i.e. you should wrap the 'add to cart' in a tag e.g. `<span>Add to Cart</span>

  <button><i class="fa-solid fa-cart-plus"></i> Add to Cart</button>
  

  Keep solving challenges and asking for feedback and you will improve in no time

  I hope this helps

  Marked as helpful

  1