Product-preview-card-component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, in case you want to take a look:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • To show different images depending on the device or screen size, the <picture> element is ideal:

  <picture>
  <source media="(min-width: 550px)" srcset="images/image-product-desktop.jpg">
  <img src="images/image-product-mobile.jpg" alt="description">
  </picture>
  

  CSS:

  • You forgot to capitalize 'Perfume', you can do it using text-transform: uppercase.

  • You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the font-size.

  • It might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

  And it seems that you were able to solve the problem that you mention in the comments 👍

  I hope you find it useful, any questions do not hesitate 🙂

  Regards,

  Marked as helpful

  0