Responsive product card with flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="wrapper"> with the main tag, add the alt attribute alt= " " to the <img> and <h3> with <p> to fix the accessibility and error issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Replace the height value of .product-card with auto or no height value to prevent the content from overflowing. increase the width value of product-card for it to match the design.

  Give .product-image and .product-details a width of 50% instead of min width.

  In the media query, there is no need to give .product-image a min-height value, give . product-card a fixed max-width value for a responsive content in smaller screens. reduce the max-width value of .product-card.

  Hope am helpful HAPPY CODING

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  • Your "button" was created with the incorrect element. It should be created using the button element. So that when the user clicks on the button (with the help of JS) it should add the product to the cart.

  More Info:📚

  MDN The Button element

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

  Happy Coding! 🎄🎁

  1