Skip to content
Submitted about 2 years ago

Product Preview Card Component using flexbox

Paul Toledo•60
@Paulawliet
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

Question 1: Is there any way to add rounded corners without adding a specific border radius on both divs (image and detail div)? because for the image I set: border-radius: 10px 0px 0px 10px; and for the details: border-radius: 0px 10px 10px 0px;, my question, is there other approach so that I can have rounded corners without designing each div?

Community feedback

  • Anthony Acosta M.•100
    @874anthonyPosted about 2 years ago

    Hi! To answer your question: no, it's not possible, since the image itself doesn't have a border-radius property set, it overflows as a default behavior, two quick solutions would be: exactly what you did (apply border-radius also to img) or

    .parent { overflow: hidden; }

    on the parent element.

    By the way, maybe for the future, if possible try to not mix pixels and rems, just stick to one relative unit, it will help you with responsiveness.

    Marked as helpful
    0
    Paul Toledo•60
    @PaulawlietPosted about 2 years ago

    @874anthony Thank you for the response and the suggestion!

    1

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