Your session has expired please log in again.
Your session has expired please log in again.
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

Order Summary Card Component Design

allys 90

@allyskorsah

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The issue I had with this project had to do with the border-radius for the card. The border-radius only showed when I used the 'Overflow:hidden' property. How would I solve an issue like this if I encounter it again?

Community feedback

Juca Perez 270

@jucajulian0907

Posted

Hello Allys! Congratulations on finishing the challenge. It is very curious, I have not discovered why this happens, but if you place the border individually to the elements, for example:

.img { border-top-left-radius: border-top-right-radius: }

and

section { border-bottom-left-radius: border-bottom-right-radius: }

That's how it works strangely. It is a lot of code but it is an alternative, maybe it will be of some use to you. Good luck!

Marked as helpful

0

allys 90

@allyskorsah

Posted

@jucajulian0907 thank you for your suggestion, I'll try it out. 😊

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