Responsive card component using CSS&HTML

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!

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 🤝