Product Preview Card Component Challenge

Community feedback

• 

  Rachit Patel•540

  @rachit0706Posted about 2 years ago

  Congratulations for completing the challenge

  I have a suggestion for you regarding the image. Insteade of using display : none in the media queries you can use the <picture> element. It provides the feature of providing different images for different screen sizes.

  Here is the link for it's reference Picture element reference W3Schools MDN reference

  If you find this feedback valuable please mark this as helpful Cheers!

  Marked as helpful

  2
• 

  Dr-Vegapunk007•140

  @Dr-Vegapunk007Posted about 2 years ago

  Hello friend, Display: none; is not the best practice for this situation try to learn about <picture> element and use it in this situation

  Marked as helpful

  1
• 

  Carmen Delber•80

  @CarmendelberPosted about 2 years ago

  Hey! you can also use the image as background of a div in css and then change the image on the desktop media query:

  div {
      background: url('../images/image-product-mobile.jpg') center;
      background-size: cover;
  }
  

  But I think the solution of picture would be more correct in terms of accesibility and semantics.

  Marked as helpful

  1
• 

  Adriano•38,080

  @AdrianoEscarabotePosted about 2 years ago

  Hi Chibuzor Isaac, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  to align the body on the center of the screen, do this:

  @media (min-width: 675px)
  body {
      margin: 0 auto;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0