Skip to content
Submitted 6 months ago

Results summary component

dewyrag•210
@dewyrag
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

was easy

What challenges did you encounter, and how did you overcome them?

no challenges

What specific areas of your project would you like help with?

does anyone know why my summary card border-radius wont change? I set the border radius in media queries but it wont change

please give feedback

Community feedback

  • Roksolana•910
    @RoksolanaVeresPosted 6 months ago

    Hi! Great job!

    Concerning your problem with the borders: first of all, in your media queries you're currently applying border-radius: 1.5rem 0 0 1.5rem; to your summary card. But you're rounding the wrong borders (top left and bottom left borders instead of top right and bottom right).

    Borders are set in this direction: 1.top-left; 2.top-right; 3.bottom-right; 4.bottom-left.

    Thus, the correct code would be border-radius: 0 1.5rem 1.5rem 0;

    But to make it work you also need to set rounded borders to the .container class.

    @media (min-width: 48rem) {
    .container {
        border-radius: 1.5rem;
    }
}

    Note: if all your borders should have the same radius you can write the radius value only once instead of four times.

    1
    dewyrag•210
    @dewyragPosted 6 months ago

    thank you! @RoksolanaVeres

    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