Responsive product card component using Flexbox and CSS Grid

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Carlos 👋

  I think it's best using flexbox to align the cart icon and text "Add to cart". I can't think of another solution. Using grid would be overkill.

  I don't know what to say. Your solution is close to perfect to be honest. But if you really want to take the extra mile, try this:

  • Remove height: 100vh; from body as it will render body's padding useless when the screen height is shorter than the card. Even the top part of the card will be hidden from the page.
  • alt="Image of Gabrielle Essence Eau de Parfum" could be replaced by a more describing text, for example alt="A bottle of Gabrielle Essence Eau de Parfum". I don't think Image of is needed here. Check this article on w3schools for the explanation.
  • Instead of using text-decoration: line-through; for <span class="card__real-price">$169.99</span>, you can use <s>$169.99</s> to give them more meaning. Read more about <s> tag element here

  Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Carlos•110

  @carlosmndzgPosted almost 2 years ago

  Hello!

  First of all thanks for your comment, I appreciate a lot the time you spent writing all those advices. :D

  I actually didn't know how the messages inside alt's attributes were as well as the existence of the <s> attribute, using that element is easier than styling with CSS and it is also semantic!

  Thank you very much, it helped a lot!

  Have a nice day!

  0