Product preview card

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 29 days ago

  Hi, good job!

  A few suggestions:

  HTML:

  • "Perfume" is a <p>, and should be written with normal capitalization. Style it in CSS using text-transform: uppercase.

  • The 2 different prices might confuse a screen reader since the old price is indicated using a visual cue. To make it clearer, I would add <span class="visually-hidden">Old price: </span>, with the following styles applied:

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

  Here is an article that explains what each of the properties does.

  • Since the cart icon is purely decorative, the alt text should be empty:alt="". The button gets its accessible name from the "Add to cart" text.

  CSS:

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

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

  • On the button, it's recommended to use border: transparent instead of border: none.

  • I would set font-size in rem instead of em. Remember, setting font-size in px causes major accessibility issues.

  • Media queries should be in em or rem.

  • Remember, inside a media query you don't need to repeat already set declarations. Thus, you can remove display: flex and justify-content: center on body, as well as display: flex on the card.

  Marked as helpful

  0
• 

  ManojSinghDashauni•260

  @ManojSinghDashauniPosted 29 days ago

  good

  0