product preview using HTML, CSS flexbox and advanced selectors

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted almost 3 years ago

  This is looking very good, there's just a few things that would be worth taking a look at

  The add to cart button:

  • you've used a div wrapping an anchor tag that has the add to cart text in it. So, while the hover effect covers the whole div, the clickable target doesn't. A user would only be able to click on the text.
  • this should really be a button. In html anchors are navigating to another location, and buttons are for executing some other action like a form submission or triggering some javascript. Here adding to cart is an action, not a navigation

  The perfume ribbon text:

  • You've written P E R F U M E directly in the html. A screen-reader will read that as individual letters, not a word
  • Instead, write Perfume in the html, and then use css text-transform and letter-spacing properties to style it like the design

  The prices section:

  • You've used flexbox here, but have had to use 4 non-breaking spaces to create the gap between the prices
  • use gap instead for more flexibility
  • In addition, on very tiny screens, or high zoom levels, you get overflow here. To avoid that add flex-wrap: wrap so it can wrap onto a new line if there's not enough space for it to fit in one line

  The image:

  • this is part of the product card, so should go inside <main>
  • you've used object-fit: fill, so at a couple of screen-sizes the image stretches out of its aspect-ratio. To avoid that use object-fit: cover

  In general though these are mostly fairly minor points that are easily fixed.

  Well done for making it very responsive, avoiding almost all overflow, writing good alt text for the image

  11

  Marked as helpful