Skip to content
Submitted about 3 years ago

Resposive page using grid css

jeevitha•70
@jeevitha1123
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

👋 Hello, Frontend Mentor coding community. This is my solution for the Order Summary Component.

Feel free to leave any feedback and help me improve my solution.

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey Jeevitha, congratulations on completing the challenge!

    Let me give you some little tips for optimizing your code:

    • remove display: table property from html
    • remove width: 100%; height: 100%; position: fixed; properties from body
    • remove the container class from the main tag
    • remove margin and height properties from panel class because with flex they are superfluous
    • to make it look as close to the design as possible add border-radius: .5rem; overflow: hidden; to panel class
    • add transition on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😁 by Travolgi

    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