Responsive Product View Card with CSS Flex

Community feedback

• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Olalekan,

  Congratulations 🎉 for completing this challenge, it was a great attempt.

  Some issues I noticed within your design and code include:

  1. It is best practice to wrap the main content within the main tag e.g. <main class="container"></main>.
  2. You are missing the font-family property within your texts which is provided within the style guide.
  3. The button is missing the cursor property e.g. cursor: pointer;
  4. The color of the button is different however when you hover over the button, it shows the same color as your current button color.
  5. Your button is missing the type attribute e.g. <button type="submit" class="btn"></button>
  6. Regarding the responsiveness of the card, it looks good however you do not need many media queries, especially within this project therefore It would be fine to have 1 or 2 media queries to change the layout when the card shifts into the desktop screen.

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

  Marked as helpful

  1

  ---

  

  Olalekan Bello•180

  @OlaOluwalekanPosted over 2 years ago

  @romila2003 Thanks for the feedback. I really appreciate. I'll heed to your recommendations

  1
• 

  Satyam Jha•400

  @satyammjhaPosted over 2 years ago

  Great attempt!! But I have a few suggestions for you:-

  1. It would be best if you had increased the height of the main div so there would be some space below the button.
  2. Image height should be adjusted manually so that it will resemble the design provided.
  3. Use cursor: pointer; for the button so that cursor will change on hovering over the button.
  4. The font used for PERFUME is not the same as given in the style guide.
  5. Increase the letter spacing of the word PERFUME and you can use google fonts to import the given fonts to your CSS.

  Hope these tips will help you. Happy Coding 🤗✌🏻.

  Marked as helpful

  0

  ---

  

  Olalekan Bello•180

  @OlaOluwalekanPosted over 2 years ago

  @satyammjha Thanks, bro. I actually forgot to add the pointer cursor.

  1