Product-Preview-card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  • You are missing the media attribute for the source element. The media attribute allows you to specify the type of media for which the resource is intended, for example, a specific screen width.

    In this case, you have used mobile first and it is necessary to change the image when the minimum width of the viewport is 600 pixels, so you would add the following media attribute to the source element:

    <picture>
      <source srcset="image-product-desktop.jpg" media="(min-width: 600px)">
      <img src="images/image-product-mobile.jpg" alt="{add an alt text here}">
    </picture>
    

  • The simplest way to set the height of the body element is with min-height: 100vh, setting the height to 100% on both the body and html elements can cause your component to be cut off on small screens, such as a mobile phone in landscape mode.

    Here is an image of how it would look on a mobile device: screencapture-aa1659-github-io-product-review-card

  I hope you find it useful! 😄

  Happy coding!

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0