Responsive Product card with CSS and HTML

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Orlando, great work! The design matches the mockup nicely. I've noticed a few things however that are worth mentioning:

  • In your markup, your img alt doesn't have a value. Also, in relation to this, your images should be handled with the <picture> element with paths to both the mobile and desktop versions, which change depending on a specified viewport width. Here's a link from MDN on how to achieve this Link
  • Because of the explicit margin values you've set globally, your content shifts to the left at viewport widths <= 789px. If you remove these values and replace it with 0 auto across all widths, this will centralise your .card horizontally.
  • Avoid using id for elements as these are a higher specificity, which makes it difficult to style with classes and often ends up involving overriding them
  • Locally host your Google Fonts for privacy and performance reasons. Here's a good link explaining how to do this Link
  • Your font-size value should be in rem not px for accessibility reasons. Here's a link explaining in further detail Link

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Orlando•60

  @LizardyOrlandoPosted over 1 year ago

  @asbhogal thanks for your help. It's been so helpful for me

  0
• 

  MD. Ifthe Kharul Islam•50

  @ifty64bitPosted over 1 year ago

  just make the body flex and center the card.

  0