product preview card component solution

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  HTML:

  • It is common to use classes instead of IDs.

  • To display different versions of the image depending on the screen size, use the <picture> element.

  • The 2 prices can be confusing for screen readers, as they cannot recognize the "strike-through" on the old price. To make things clearer, it is recommended to add the following right before the old price: <span class="visually-hidden">Old price:<span>. The visually-hidden class should have these properties:

  .visually-hidden {
    clip-path: inset(50%);
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
    height: 1px;
  }
  

  • The shopping cart icon is decorative, and the "Add to cart" is what describes the action. Hence, you should hide the icon for screen readers, by placing aria-hidden="true" as an attribute on the icon.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • On the container, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove width: 100% - <main> is a block element, meaning it takes up 100% of the width by default.

  • You don't need to declare flex-direction: row, as that is the default.

  • Remove the width and height on the card. If needed, add a max-width in rem, so it doesn't stretch too wide on larger screens.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • letter-spacing must also never be in px.

  • Media queries must be in rem, and it's best practice to do mobile styling first.

  Marked as helpful

  0

  ---

  

  Jafar Mirzapoor•440

  @jeff-mzPosted 10 months ago

  This was really informative thank you 🙏@Islandstone89

  0