Product preview card component

Community feedback

• 

  John Denver•290

  @jbidzPosted almost 2 years ago

  Hi there, good job on taking this challenge

  Here are my suggestions that you might need to consider

  • To make the image responsive for every devices you could use picture element and display different images in different breakpoints using media attribute. The code will look like this:

  <picture>
          <source srcset="image-mobile.jpg" media="(max-width: 600px)"/>
          <img src="image-desktop.jpg" alt="" />
  </picture> 
  

  • To identify the main content of the page you want to wrap your entire component inside the main element. main element helps search engines and other web technologies understand the most important content on a page, which can affect how the page is indexed and displayed in search results.

  Refer MDN main element

  If you found this feedback helpful, please consider to mark this as helpful.

  2
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Looks good but you did the mobile version only and missed out the desktop version 😊 Also, instead of using div with the class box-container use main tag instead to get read of the report errors

  1