Product-component using grid

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello again 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

  • The element <div class="grid-row-3"> should be a button and not a div, since an element has a :hover state and has a pointer cursor it is considered an interactive element (buttons, links, etc).

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  3
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card-grid"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card-grid on the page using grid, add min-height:100vh to the body.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  2

  ---

  

  Anas Elmarzouqy•60

  @EpsilomePosted almost 2 years ago

  @Hassiai Thank you for your help and time. I have a little question regarding the min-height because I tried looking everywhere but I didn't see any difference even slight on the live website.

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @Epsilome using the min-height will center your content even if its height is 100vh or above 100vh.

  1