Product-preview-card-component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 26 days ago

  HTML:

  • You don't need to include words like "picture" or "image" in the alt text, as screen readers read that by default.

  • As the card heading would likely not be the main heading on a page, I would change it to a <h2>.

  • To make it clearer for screen readers that the second price is the old price, I would add a <span> with a "visually-hidden" class:<p class="old-price"><span class="visually-hidden">Old price: </span>$169.99</p>. Then, apply the following styles to make "Old price" visible for screen readers only:

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

  This article explains what each of the properties does.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  gap: 2rem;
  

  • When padding-left and padding-right have the same value, you can use the shorthand:padding-inline: 2rem;.

  • You must remove the max-height on the card - never limit elements containing text! The current max-height: 70vh cuts off the card just underneath the prices - always let the content, including margin and padding, determine the height.

  • Do also remove height: 100vh on the card.

  • max-width on the card should be in rem instead of % - around 50rem works fine.

  • On smaller screens the "Add to cart" button touches the edge of the card - add some padding or margin to create breathing room.

  • font-size on .attribution must also be in rem.

  • letter-spacing must not be in px. You can use em, where 1em equals the element's font size.

  Marked as helpful

  1