Product review card component

👾Hello Sithum Gimhara, congratulations for your new solution!

I saw your live site and the solution is amazing, the only thing to fix here is the image the is not scaling with the correct proportion. To fix this behavior follow these steps fo make it responsive.

Here is my advice for your:

Add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

👋 I hope this helps you and happy coding!

Hi there Sithum!

Good job on that project! If you don’t mind, I will provide you with some feedback :)

So I checked your code and it appears that you used <h3> before <h1> tag and <h1> is repeated twice. This is considered a mistake because when using headings we want to stick to the so - called hierarchy. You probably did it because the font size was correct but you can just change it in css in no time. We typically want to start from h1 because it should be a main title on our page and move our way to h6. Here is some good resource on that topic:

https://www.contentkingapp.com/academy/headings/

Aside from that the code looks good, you have a good naming convention for classes. Very readable and self-explanatory.

Overall amazing work on that project! I hope I was a little bit helpful for you. Good luck on next projects and happy coding!