Skip to content
Submitted over 1 year ago

Order Summary Component using HTML, CSS

bootstrap
Malgorzata Stano•70
@gosiast
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

UPDATE: thank you for the help, It fixed the issues and answered my questions :)

// I struggled to use the border: radius to the top of the 'card' element. How can I fix that?

I learned that I need to pay attention to the parent-child element.

Can someone help me how to insert a screenshot into the README file?

Thanks for the feedback! :)

Code

Please log in to post a comment

Log in

Community feedback

  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello There! 👋

    Congratulations on completing this challenge. 🎉

    I've some suggestions that might interest you. 💡

    • use overflow: hidden; on your .card, it will take care of the overflowing image, and the specified border-radius will be applied to the card.

    • you can add a screenshot into the readme like this ![alt text](./src/images/screenshot.jpg) or this <img src"./src/images/screenshot.jpg" />

    Hope this helps you. 👍

    Happy Coding 🤓

    Marked as helpful
  • JimTK16•370
    @JimTK16

    Hi, i think you only need to set border radius for the top container, in this case is the order--wrapper. You can do something like this {border-radius: 2rem; overflow: hidden}. The overflow: hidden is to keep the image from overflowing the container, and help to reveal the top corners. To insert images to readme file you could do a quick search about insert images in markdown.

    Hope it helps.

    Jim

    Marked as helpful

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