Respponsive product preview card using mobile-first approach

Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

• It would be better to add the <img> to your HTML and then style it with something like this,

.product__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
  }

• Then set the width and height for the <img> it helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSS aspect-ratio property instead.

• This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing.

• Using position: absolute is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.

You have done so many things correctly with this solution, Keep building on your knowledge, and remember, every step forward is progress. You’re on the right track, and you’re doing great. Have an awesome day and happy coding! 😊

Please, try this code, I think, it could help against the scroll.

*, :after, :before, body { margin: 0; padding: 0;}

But, please, write it in the beginnig of your style.css

Hope you found this comment helpful :)