Responsive card component using CSS&HTML

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution contains a minor semantic issue which may cause lack accessibility

  ---

  • The old price is not being properly announced, you have used p element for that.

  ---

  • Actually there's a native html element which comes handy in these situations. it is del element

  ---

  • So you can use like this <del>$169.99</del>

  ---

  • These are the tips which improves the accessibility in real world situations.

  ---

  • And another thing is that you can consider to change the div with role=main into main element

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  01

  Marked as helpful
• 

  Rino•340

  @Rhinozer0s

  Posted about 2 years ago

  Hey @iWatt92 , 😎

  I have a little improvment for your button. You could remove the margin-right property on your <img> element and add this to your button:

  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  

  Now your content ist centered. Another useful tip relates to the responsive image. For responsive images you should use the <picture> element. This could look like this:

  <picture>
  <source media="(min-width:600px)" srcset="image-desktop">
  <img src="image-mobile">
  </picture>
  

  you can read more about the picture-tag here: https://www.w3schools.com/tags/tag_picture.asp

  feel free to ask if there are any other questions. If you are not shure how to implement this, you can look over for my project.

  i hope you find that helpfull 🤝

  01