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.

  • It would be better to capitalize 'Perfume' with CSS (using text-transform: uppercase;) and not in HTML. Some screen readers will read out uppercased text as individual letters.

  CSS:

  • It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

  And if you plan to make it responsive, remember this:

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

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

  • The mobile first approach, which means designing for mobile first and then for desktop or any other device, is widely considered best practice.

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

  Regards,

  Marked as helpful

  2

  ---

  

  Andyy•90

  @Andy-VasseurPosted over 1 year ago

  @fernandolapaz Hi 👋, Thanks for your feedback and the tips, I’ll update all that. 🙂

  0
• 

  Andyy•90

  @Andy-VasseurPosted over 1 year ago

  Still not responsive, I know :p

  0