Responsive Product Card using HTML and CSS

Hi @misalima 👋. Really cool project. About your question:

I saw the code and think the problem is the overflow: hidden. Instead of just overflow, there is another CSS property I would recommend : overflow-x : hidden and also, maybe remove the html style block. It doesn't do anything at all.

Something else I noticed was the way you used the image as a background image. This does not make a lot of sense semantically, cause the image is a part of the content and not a presentational piece. And there is a way to accurately position images and control their dimensions with the css object-fit property. You might want to read more about it on MDN, but you could use it like this:

selector { 
	object-fit: cover; 
	object-position: top left; 
	width: 300px; 
	height: 100%;
 }

Hope you find this helpful. Your project is great. Feel free to ask more questions and keep coding👍,

Ayobami