Mobile-first product-preview-card-component in HTML and CSS

Community feedback

• 

  A1ex•500

  @a1excpunkPosted over 2 years ago

  Good job on the desktop version but the mobile version looks a bit off.

  1. image borders.
  2. width.
  3. transition from desktop to mobile.

  Good luck and keep coding 🤘🏻

  0
• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Adersh,

  Congratulations 🎉 on your first challenge. It was a good attempt.

  Within your report, there was an accessibility and HTML issue in which you did not include an alternative text in your image element. This is important as it helps screen readers and users understand what the content of the image is, if the image is unavailable. The text does not have to be complicated but descriptive enough for users. e.g. <img src="images/image-product-mobile.png class="mobile-img" alt="Perfume Image">. Regarding the responsiveness of your card, it is great that you took a mobile -first approach however when shifting between the mobile screen size to the tablet and desktop, the card does not respond well, where the content in the card becomes too wide. You could reduce your max-width property. Your desktop screen size looks great however the mobile and tablet screen sizes need adjusting.

  Overall, it was a good first attempt and wish you all the best in your future projects 👍.

  Hope this comment and suggestions helps.

  0