Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component (HTML/CSS)

Matthieu 180

@Matt971x

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


hello, everyone :)

What did you find difficult while building the project?

  • Sizing containers ( px or % )
  • spacing element under containers

Which areas of your code are you unsure of?

  • everything
  • My product-content element. I didn't success to move down the button without overflow and i'm not sure of my process to make this box. it's seems like i'm tweeking things too much things.

Do you have any questions about best practices?

Tips and tricks are very welcome.

Community feedback

@kabir-afk

Posted

Hey!! Look there isn't much for you to improvise on , you know how to name elements making your CSS look pretty clean...you are writing semantic html , you are using appropriate units at some places, you are aware of the picture tag....but I'd still recommend if you could could avoid using pixels for specifying dimensions. It's better if you go with % . Similarly for padding use ems , for font size you've already used rem which is great.. The more relative units the better....your perfume image is lil cramped up..it's matching the height but not the width....well its not like you've applied any CSS to it, but if you do , try

img:{max-width:100%}

and then enclose your image inside a div tag , what this will do is whenever you control the width of your div tag your image's dimensions will change simultaneously...keep coding !!!

Marked as helpful

0

Matthieu 180

@Matt971x

Posted

@kabir-afk Thank you very much for you answer , i apriciate it ! thanks for your advices i'll try to apply them for other challenges ! thanks a lot !

0

Please log in to post a comment

Log in with GitHub
Discord logo

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