Skip to content
Submitted over 2 years ago

Product Preview Card

Trenton Bensheimer•190
@tbensheimer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! I completed another project and this one was one of the harder newbie challenges in my opinion but I still enjoyed doing the project! I had fun figuring out how to lay the image perfectly next to the div container. I also never knew that you can use the border-radius property on certain corners which was interesting. If any of you have any suggestions on how to improve my code please let me know! Thank you in advance!

Community feedback

  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @tbensheimer

    There is a way of seting the border-radius only on the container and showing also on the image, you can do that like this:

    .container{
  border-radius: 10px;
  overflow: hidden;
}
    • I would suggest using rem or em units, instead of pixel units, px can cause Issues when trying to make your site/component responsive.

    Now you can remove the border-radius on the image!

    Keep it up :)

    0

Please log in to post a comment

Log in with GitHub

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