Responsive product card built with pure css and html

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 1 year ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Unfortunately, there are numerous aspects that require improvement. I recommend reading this excellent article as it demonstrates how to correctly structure your HTML for this particular challenge.

  How to plan your HTML (1): Product Preview Card

  As for you CSS:

  • In modern Web Development, all content is built mobile first, in which you style for small screen first and use media-query to style for larger screens. This will ensure that performance and responsiveness are prioritized.

  • Font-size should always be in rem as this helps with accessibility.

  • The height: 100vh; in the body should be a min-height instead for improved responsiveness.

  • There's is no need to apply border-radius multiple times, just apply it to the card container along with overflow: hidden

  • Avoid using static properties as they negatively affect responsiveness.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  Alejandro Cañon•260

  @alecanonmPosted about 1 year ago

  Thank so much, I’ll be in contact with you later 👾@vcarames

  0