Skip to content
Submitted over 2 years ago

Responsive Product Card using HTML and CSS

Misael Alisson Ursulino de Lima•30
@misalima
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

More challenging than I thought

The desktop part was ok. I had a little difficulty with the mobile styles, in the media query, because I couldn't make the horizontal scroll bar disappear, I don't know why. Somehow I fixed the problem, I also don't know exactly how. I would like to know if the way I sized the image in the media query style is ok, or if there is a better way in terms of best practices.

Code

Please log in to post a comment

Log in

Community feedback

  • Ayobami Ikuewumi•850
    @Ikuewumi

    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

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord