Product preview card component

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Greetings Chris! your solution looks very good 😃

  May I suggest that, to make your image fit the container and not stretch to fill the space, you use a background-size: cover instead of background-size: 100% 100%

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @chintriago!

  Your solution looks excellent!

  I have just one suggestion:

  • You could've used only the tag main instead of main and article.

  The tag article would make more sense if the card was part of a bigger website (it certainly would in real world). But here, the card is all we have on the screen, so it's the main content.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Chris•250

  @chintriagoPosted 11 months ago

  @danielmrz-dev That makes sense thank you for the advice. Quick question if I were to do that would it be okay to put all the styling meant for the parent/container of main into the body like flex? Is that ok to do?

  0
• 

  Ahlam•300

  @AhlamAb22Posted 11 months ago

  You can use <s> for the old price and also it's better to add some visually hidden text for the old price and the current price for screenreaders users

  Marked as helpful

  1

  ---

  

  Chris•250

  @chintriagoPosted 11 months ago

  @AhlamAb22 thanks! I didn't know about <s>. How do I add the visually hidden text?

  0

  

  Ahlam•300

  @AhlamAb22Posted 11 months ago

  @chintriago You are welcome!

  You just need to add a text to clarify what are these numbers but you make it invisible using CSS

  You can find my solution here:

  https://github.com/AhlamAb22/Product-preview-card-component

  1