Responsive product preview card component using HTML & CSS

Community feedback

• 

  Martín•240

  @martinoruePosted over 1 year ago

  Hi! Great job! 😊

  Regarding your question, there is a better solution for these cases. The rule of thumb that I like to remember is that if the image contains important content for the user and is not just a background image, it should be placed in the HTML. Otherwise, it can be placed in the background CSS property.

  I would recommend you to read this article about responsive images. You'll find the anwser to your question in the Art Direction section.

  Good luck! If you need any further assistance, feel free to reach out.

  Marked as helpful

  1

  ---

  

  ahmed-abbe•90

  @ahmed-abbePosted over 1 year ago

  @martinorue Thank you so much for your help. I really appreciate it. And good luck to you too!

  1
• 

  Adel•820

  @Adel-HarratPosted over 1 year ago

  Hello , congrats on completing the challenge!

  I like what you did <3

  now, about your question, Your method (using background image) is fine, but I would prefer using the img html tag like this <img src="link-of-image.jpeg" alt="small description about the image" />, don't forget the alt attribute, its tempting, I know, I've been there xD its important for accessibility.

  anyway, good luck and happy coding xD

  Marked as helpful

  1

  ---

  

  ahmed-abbe•90

  @ahmed-abbePosted over 1 year ago

  @Adel-Harrat Thank you so much. I will bear that in mind. I'm glad you liked what I did <3, and good luck for you too!

  1